JSFiddle - React, Tailwind, and code Playground
CSS
div {
position : absolute;
left : 0;
top : 0;
width : 100px;
height : 100px;
border : 1px solid black;
}
JavaScript
var distance = 300,
frames = 30,
current_frame = 0,
time = 1000,
delta = Math.floor(distance / frames),
$element = $('div'),
my_timer;
my_timer = setInterval(function () {
if (current_frame < frames) {
var left = parseInt($element.css('left').replace('px', ''), 10);
$element.css('left', (left + delta));
} else {
clearInterval(my_timer);
}
current_frame++;
}, Math.floor(time / frames));