JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div id="SomeElementYouWantToAnimate">

</div>

CSS

#SomeElementYouWantToAnimate {
  width: 0;
  height: 1em;
  background-color: grey;
  border: 1px grey solid;
}

JavaScript

var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.width = Math.min(progress / 10, 200) + "px";
  
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);