JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<div id="box" style="position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; background-color: red;"></div>

JavaScript

var box = document.getElementById('box'),
    boxPos = 10,
    boxVelocity = 2,
    limit = 300,
    lastFrameTimeMs = 0,
    maxFPS = 10;

function update() {
    boxPos += boxVelocity;
    // Switch directions if we go too far
    if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}

function draw() {
    box.style.left = boxPos + 'px';
}

function mainLoop(timestamp) {
    // Throttle the frame rate.    
    if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
        requestAnimationFrame(mainLoop);
        return;
    }
    lastFrameTimeMs = timestamp;

    update();
    draw();
    requestAnimationFrame(mainLoop);
}

requestAnimationFrame(mainLoop);