JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="player"></div>

CSS

#player {
    width: 50px;
    height: 50px;
    background-color: #F00;   
    position: absolute;
}

JavaScript

(function(){
    var requestAnimationFrame = (function(){
        return window.requestAnimationFrame    || 
               window.webkitRequestAnimationFrame || 
               window.mozRequestAnimationFrame    || 
               window.oRequestAnimationFrame      || 
               window.msRequestAnimationFrame     || 
               function(callback, element){
                   setTimeout(function(){ callback((new Date).getTime()); }, 1000/60);
               };
    })();

    var speed = 60; // pixels per second
    var calc = speed/1000;
    var player = document.getElementById('player');
    var start_time = (new Date).getTime();
    
    (function draw(time){
        var pos = (time - start_time)*calc;

        player.style.left = pos + 'px';

        requestAnimationFrame(draw);
    })();

})();