JSFiddle - React, Tailwind, and code Playground

by andrei

HTML

<div id="foo"></div>

CSS

#foo {
  width: 100px;
  height: 50px;
  background-color: red
}

JavaScript

function animate(el, x, duration) {
  let start = Date.now();
 	const step = x/duration;
  console.log(step);
  
  const interval = window.setInterval(() => {
  	const now = Date.now();
    
  	if (now > start + duration) {
    	window.clearInterval(interval);
      console.log("FINISHED: ", now-start);
    }
    
    el.style.transform = `translateX(${Math.min((now - start) * step, x)}px)`;
  }, 1);
}

animate(document.getElementById("foo"), 100, 1000);