JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id="SomeElementYouWantToAnimate"></div>

CSS

#SomeElementYouWantToAnimate{
  width: 40px;
  height: 40px;
  border: 2px solid red;
}

JavaScript

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

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

window.requestAnimationFrame(step);