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);