Minimalistic way to create JS animations (~1.5 KB). Use prefix to auto-prefix CSS properties.
Battle-tested in my HTML5 Deck of Cards, source.
npm install animationframes
import AnimationFrames from 'animationframes';
const translate = (el, x, y) => el.style.transform = `translate(${x}%, ${y}%)`;
const { from } = AnimationFrames;
const el = document.createElement('h1');
const animation = new AnimationFrames({
delay: 0,
duration: 1000,
oninit () {
el.style.display = 'none';
},
onstart () {
el.style.display = '';
},
onprogress (e) {
translate(el, from(-100, e), 0);
},
onend () {
el.style.transform = '';
}
});
el.textContent = 'Hello world!';
document.body.appendChild(el);https://jsfiddle.net/w7zhurx3/
Another example: https://jsfiddle.net/1oj7y29g/1/
Available easings: https://github.com/pakastin/animationframes/blob/master/src/ease.js
<script src="https://pakastin.github.io/animationframes/animationframes.min.js"></script>
<script>
const animation = new AnimationFrames( ... );
...
</script>