JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="button" class="animate" value="animate!"/>
	<input type="button" class="stop" value="stop" onclick="running=false;">  
</div>
                
	<div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div class="mover"></div>
		<div...

CSS

.mover {
  background:url(http://jankfree.org/velocity-europe/examples/too-much-layout/particle.png);
  height:100px;
  width:100px;
  position:absolute;
  z-index:0;
}

input {
  z-index:2;
  font-size:25pt;
  height:100px;
  width:100px;
  display:inline-block;
}

JavaScript

// setup
var rAF = window.requestAnimationFrame;
var startBtn = document.querySelector('.animate');
var stopBtn = document.querySelector('.stop');

// state
window.running = false;

// add listeners
// start
startBtn.addEventListener("click", function(e){
   running = true;
   rAF(update); 
});

// stop
stopBtn.addEventListener("click", function(e){
   running = false; 
});

// Set the heights for all these
// movers in simple CSS style.top
var movers = document.querySelectorAll('.mover');
(function init() {
    for (var m = 0; m < movers.length; m++) {
        movers[m].style.top = (m * 20 + 50) + 'px';
    }
})();

// animation loop
function update(timestamp) {
    for (var m = 0; m < movers.length; m++) {
            movers[m].style.left = ((Math.sin(m + timestamp / 1000) + 1) * 500) + 'px';
        }

    if (window.running){
        rAF(update);
    }
};
rAF(update);