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
;
Once you've done that you just need to new up an instance, add your elements and hit play!
let tl = ;
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
{ thispageEnterTl = ; /** Inside Vue $refs also work as well as query selectors */ thispageEnterTl ; } { thispageEnterTl; }