JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://pakastin.github.io/animationframes/animationframes.min.js"></script>

CSS

body {
  font-family: sans-serif;
}

Babel + JSX

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);  
document.body.appendChild(el);