CSS Animation Timeline

Easily control complex css animations using this tiny utility class (3kb!)

View example on Codepen

Features

• Easy, fluent syntax
• Method chaining supported
• Optional staggering if multiple elements with the css selector are found
• Add arbitrary delaying at any point
• Any valid css selector can be used to specify elements

Getting started

Install the library from npm

npm i css-animation-timeline

Then import it into your project

import CssAnimationTimeline from 'css-animation-timeline';

Once you've done that you just need to new up an instance, add your elements and hit play!

let tl = new CssAnimationTimeline()
        .add('.heading', 'fade-in')
        .delay(500)
        .add('.text-block', 'fade-in', 100)
        .play()
        .then(() => {
          console.log('Animation finished!');
        });

Make sure you call tidyUp() when you want to reset everything - this will remove the classes and event hooks. If you don't you'll develop a memory leak

Vue example

export default {
  mounted() {
    this.pageEnterTl = new CssAnimationTimeline();

    /** Inside Vue $refs also work as well as query selectors */
    this.pageEnterTl.add(this.$refs['heading'], 'fade-in')
                    .delay(500)
                    .add('.text-block', 'fade-in', 100)
                    .play();
  },
  destroyed() {
    this.pageEnterTl.tidyUp();
  }
}

Extra resources

• View example on Codepen
• View NPM page