JSFiddle - React, Tailwind, and code Playground

by Noreh AD

HTML

<div id="box"></div>

CSS

body {
  background: gainsboro;
}

#box {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  position: absolute;
  left: 0;
}

JavaScript

var box = document.getElementById("box");

var fps = 60;
var duration = 2; // seconds
var start = 0; // pixel
var finish = window.innerWidth - box.clientWidth;
var distance = finish - start;
var increment = distance / (duration * fps);

var position = start;

function move() {
  position += increment;
  if (position >= finish) {
    clearInterval(handler);
    box.style.left = finish + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);