JSFiddle - React, Tailwind, and code Playground

by catfood

HTML

<div id="box"></div>
<input type="button" value="stop" id="stop">

CSS

#box{
    background:red;
    width:100px;
    height:100px;
    position:relative;
}

JavaScript

window.requestAnimationFrame = window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

window.cancelAnimationFrame = window.cancelAnimationFrame ||
  window.mozCancelAnimationFrame ||
  window.webkitCancelAnimationFrame ||
  window.msCancelAnimationFrame;

var timer,i=0,box = document.getElementById("box");
function step() {
  i+=2;
  box.style.left = i + "px";
  if (i < 400) {
    timer = requestAnimationFrame(step);
  }
}
timer = requestAnimationFrame(step);


document.getElementById("stop").onclick = function(){
    if(timer)cancelAnimationFrame(timer);
}