animotion
v0.1.2
Published
Subscribe to element animation events in a declarative way
Downloads
23
Readme
#Animotion
Subscribe to element animation events in a declarative way DEMO
##Usage
Having the following CSS
#animated-div{
border: 1px solid;
width: 1px;
height: 1px;
animation: foo 2s infinite;
}
@keyframes foo {
0%{
transform: translateX(0);
}
50%{
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
###Listen for events
const animotion = require('animotion');
const div = document.getElementById('animated-div');
let iterationCount;
const start = _ => {console.log(`Element started animation at ${new Date()}`)};
const iteration = _ => {console.log(`Element iteration: ${iterationCount++}`)};
const end = _ => {console.log(`Element finished animation at ${new Date()}`)};
animotion(div)
.on('start', start)
.on('iteration', iteration)
.on('end', end)
###Filter by animation name This could be useful if you add/remove classes that involve animations in the same element and you want to react different to them:
//The start event will not be called because the animation name is different
animotion(div)
.name('bar')
.on('start', start)
//Events are called because the animation name matches
animotion(div)
.name('foo')
.on('start', start)
.on('end', end)
###Demo Tracking animation status, slapsed time and iteration number with Animotion
https://zzarcon.github.io/animotion/
###Installation
$ npm i animotion -S
###Author
@zzarcon :rocket: