JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="inner-box"> 
        <div id="Box"class="box">1</div>
    </div>

JavaScript

let draw = (timePassed)=>{
  Box.style.left = timePassed/5 + 'px';
}
let init = ()=>{
  wrapper = document.querySelector('.inner-box');
  Box = document.getElementById('Box');
  Box.onclick = ()=>{
    animate(draw,2000);
  }
  
 
}//end of init
let animate = (draw,duration)=>{
  let start = performance.now();
  requestAnimationFrame((time)=>{
    let timePassed = time - start;
    if(timePassed > duration){
      timePassed = duration;
    }
    draw(timePassed);
    if(timePassed < duration){
      requestAnimationFrame(animate);
    }
  });
}

 
 
window.addEventListener('load', init, false);