animationframes

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.

install

npm install animationframes

usage

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/o6vac675/4/

Another example: https://jsfiddle.net/pakastin/fjozqopm/

easings

Available easings: https://github.com/pakastin/animationframes/blob/master/src/ease.js

oldskool

<script src="https://pakastin.github.io/animationframes/animationframes.min.js"></script>
<script>
const animation = new AnimationFrames( ... );
...
</script>

License

MIT