JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<button type="button" onClick="startAnimation()">Start Animation</button>
<button type="button" onClick="stopAnimation()">Stop Animation</button>

<div id="container" >
    <div id="splitter"></div>
    <div id="rect"></div>
</div>

CSS

#splitter{
    width: 150px;
    height: 1px;  
}
#container{
    background-color: yellow; 
    width: 100px; 
    height: 100px; 
    overflow: auto;        
}
#rect{
    background-color: red; 
    width: 50px; 
    height: 50px;    
}

JavaScript

// http://stackoverflow.com/questions/7487691/why-does-requestanimationframe-function-accept-an-element-as-an-argument
//http://www.w3.org/2010/webperf/track/issues/4
var rect = document.getElementById("rect");

var requestId; 

var i = 0;
var animateOnce = function(){
    console.log('animate' + (i++));
}; 

window.startAnimation = function(){
    function callback(){
       animateOnce(); 
       requestId = window.webkitRequestAnimationFrame(callback, rect); //rect not taken in account
    };  
    requestId = window.webkitRequestAnimationFrame(callback, rect); //rect not taken in account
}; 

window.stopAnimation = function(){
    webkitCancelRequestAnimationFrame(requestId);
    i = 0;
}