JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div id="mydiv">HI MIKE</div>

CSS

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

JavaScript

const el = document.getElementById('mydiv');
let start, prevTimestamp;
const totalTime = 2000;
const xInc = 0.1;

function anim(timestamp) {
	if (!start) {
  	start = timestamp;
  }
  
  const elapsed = timestamp - start;
  
  if (timestamp !== prevTimestamp) {
  	const x = xInc * elapsed;
    el.style.transform = `translateX(${x}px)`;
  }
  
  if (elapsed < totalTime) {
  	prevTimestamp = timestamp;
    window.requestAnimationFrame(anim);
  }

}

window.requestAnimationFrame(anim);