Css-animation-timeline NPM

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();
  }
}