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 { frames, ease } from 'animationframes';
const translate = (x, y) => `translate(${x}%, ${y}%)`;
const el = document.createElement('h1');
const animation = frames(0, 1000)
.start(() => {
el.style.transform = translate(-100, 0);
})
.progress((t) => {
const e = ease.quartInOut(t);
const x = -100 * (1 - e);
el.style.transform = translate(x, 0);
})
.end(() => {
el.style.transform = '';
});
el.textContent = 'Hello world!';
document.body.appendChild(el);https://jsfiddle.net/o6vac675/4/
Another example: https://jsfiddle.net/pakastin/fjozqopm/
Available easings (you can use your own!): https://github.com/pakastin/animationframes/blob/master/src/ease.js
<script src="https://pakastin.github.io/animationframes/animationframes.min.js"></script>
<script>
const { frames, ease } = animationframes;
...
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent