Animation Chain

Animation Chain is a chaining library which utilizes the browser's requestAnimationFrame function in place of the usual setTimeout. This results in a much more accurate representation of time passed based on a delta time calculation. This can be useful in timing class additions and removals based on CSS transition timings.

Set Up

• Clone the repo
• Run npm install to install dependancies
• Run grunt to build the files into the public/ dir

Usage

animation-chain is invoked the same way that setTimeout is, with the chainTo function being added to easily integrate successive function calls. Like promises for certain amounts of time or events

setTimeout(function(){console.log('old')}, 500);

chain(function(){console.log('new')}, 500);

Here's a use case for a slightly longer timeout (useful in chaining animations through adding classes)

setTimeout(function() {
  el.classList.toggle("animation1");
  setTimeout(function() {
    el.classList.toggle("animation2");
  }, 500)
}, 500);

chain(function() {
  el.classList.toggle("animation1");
}, 500).chainTo(function() {
  el.classList.toggle("animation2");
}, 500);

All while being more performant based on animation frame usage

You can also tap into the transition and animation events like so

var chainObject = {
  selector: '.animating-el',
  callback: function() {
    console.log('animation-ended')
  },
  animationType: 'transition'
}

chain(chainObject);

Options

callback: The callback to be executed when animation/timeout ends

animationType: Defaults to transition can also be animation if keyframes are being used

time: If using a timeout, the time to be used

singleListener: Defaults to true. Whether to only allow one event listener on a given element at a time. This can be useful when working with animations that can be stopped partway through so the event listener doesn't fire at the wrong end of the animation

Fallbacks

If you're planning on utilizing timing events but want to support browsers that don't support those events, simply pass a time into your object with the correct amount of time the animation. The plugin will detect that those events are supported and default to the timeout

Useful grunt tasks

• lint - Check your code

Examples

Run npm run examples to start a server and view the different examples

This starts a server running at localhost:8080/

Coming soon

~~Support for transitionEnd events~~