css-animation-timeline

1.0.7 • Public • Published

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

Package Sidebar

Install

npm i css-animation-timeline

Weekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

6.4 kB

Total Files

4

Last publish

Collaborators

  • wardee