css-animation-timeline
v1.0.7
Published
Easily control complex css animations using this tiny utility class (Under 3kb!)
Downloads
22
Readme
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();
}
}