JSFiddle - React, Tailwind, and code Playground

by Alhalabi

HTML

<p id="some-element-you-want-to-animate"></p>

CSS

#some-element-you-want-to-animate{
width: 50px;
height: 50px;
background-color: red;
}

JavaScript

const element = document.getElementById("some-element-you-want-to-animate");
let start;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  // Math.min() is used here to make sure the element stops at exactly 200px
  const shift = Math.min(0.1 * elapsed, 200);
  element.style.transform = `translateX(${shift}px)`;
  if (shift < 200) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);