actuatejs

Actuate

ac·tu·ate /ˈak(t)SHəˌwāt/ : cause (a machine or device) to operate.

A shiny new (~500b) vanilla implementation of what was previously A tiny jQuery wrapper for animate.css which allows for one line easy actuation of CSS animation sequences with thenable chaining.

Check out this example on CodePen.

Getting Started

Note: this library uses promises for which you might need a polyfill

Include the library

Directly in the head of your document from the CDN

<script src='https://unpkg.com/actuatejs'></script>

or require it in your source files after npm install actuatejs

import Actuate from 'actuatejs' // ES6

Define a CSS animation

You can define your own or employ a library like animate.css

@keyframes pulse {
  from { transform: scale(1) }
  50% { transform: scale(1.05) }
  to { transform: scale(1) }
}
.pulse {
  animation-name: pulse;
}

Run with javascript

In a script tag before the closing body tag

Actuate('pulse')(document.body)
.then($ => console.log('Finished animating', $))
.catch($ => console.log($, 'was already animating'))

Usage

The API is intended to be as simple as possible providing low overhead syntax for animation sequencing, chaining of sequences and animationEnd detection.

Single Animation

To animate an HTML element, first pass the Actuate function the name of the CSS animation you would like to apply. This primes the animation ready to be bound to a target element (in this case document.body) which is passed as the second argument:

Actuate('tada')(document.body)

Once the function has received both arguments, the animation will initiate. You can pass in any single HTML element as the target element. For example using the native querySelector method:

Actuate('tada')(document.querySelector('.class'))
Actuate('tada')(document.querySelector('#id'))
Actuate('tada')(document.querySelector('input[type=text]'))

Sequential Animations

Often it is desirable to run animations one after another. There is no native method that assists this behavior. The Actuate function accepts a space delimited list of named CSS animations as the first argument and handles this complexity for you:

Actuate('rollIn tada rollOut')(document.body)

You can also pass in an array of named animations if you prefer:

Actuate(['rollIn', 'tada', 'rollOut'])(document.body)

When one animation finishes the next one will start until there are no more to apply.

Animation End

The Actuate function returns a promise which means you can easily declare a then function which is guaranteed to execute once all the animations in a sequence have been applied.

Actuate('tada fadeOut')(document.body)
.then($ => console.log('Finished Animating', $))

The then function gets passed the target element. In the above case $ === document.body.

Already Animating

The only time Actuate will throw an error is if you try animate an element that is already animating:

addEventListener('click', () =>
  Actuate('tada')(document.body)
  .then($ => console.log('Finished'))
  .catch($ => console.log('Already Animating'))
)

Chaining sequences

The Actuate function takes advantage of partial appliction which means that animation sequences can be defined without having to immediately specify a target element.

var intro = Actuate('rollIn')
var showoff = Actuate('bounce tada bounce')
var outro = Actuate('rollOut')

You can then provide a target element and let it flow through a chain of predefined animation sequences:

Promise.resolve(document.body)
.then(intro)
.then(showoff)
.then(outro)