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 { frames, ease } = 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);