animation-chain

    0.5.0 • Public • Published

    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

    Install

    npm i animation-chain

    DownloadsWeekly Downloads

    3

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • avatar