JSFiddle - React, Tailwind, and code Playground

by rrafw

HTML

<div id="left" style="position: absolute;	z-index: 1;  width: 40px; height: 150px; left: 0px; background: #22bb22;">
</div>
<div id="right" style="position: absolute;	z-index: 1;  width: 40px; height: 150px; left: 40px; background: #bb2222;">
</div>
<div class="info" id="info" onClick="" style="position: absolute; width: 200px; height: 100px; bottom: 0px; ">
</div>

JavaScript

var obj1 = [];
var obj2 = [];
var objects = [];
obj1.push(document.getElementById('left'), ['left','px', 0, 2], ['width','px', 10, 2]);
obj2.push(document.getElementById('right'), ['left','px', 10, 2], ['width','px', 60, 2]);

objects.push(obj1, obj2);
startAnimation(objects, 2, 60);

function startAnimation(objects, seconds, fps, onCompleteFunction) {
	var now;
	var fps = fps;
	var duration = seconds * 1000; //miliseconds
	var iterations = seconds * fps;
	var startTime = Date.now();
	var previous = startTime;

	var interval = 1000/fps;
	var stop = false;
	var delta;

	var frameCounter = 0;

	// info
	var elapsed = 0;
	var info = document.createElement('p');
	document.getElementById('info').appendChild(info);	
	
	for (var i = 0; i < objects.length; i++) {
		for(var j = 1; j < objects[i].length; j++) {
			var splitValue = objects[i][0].style[ objects[i][j][0] ];		
			var originalValue = splitValue.split(objects[i][j][1]);
			originalValue = parseInt(originalValue[0]);			
			var increment = originalValue; // increment will be altered by the easing formula
			objects[i][j].splice(2, 0, originalValue);
			objects[i][j].push(originalValue, increment);
		}
	}	
    animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info);
} 
function animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info) 
{
		if (stop) {
			return;			
		}  
		window.requestAnimationFrame( function() { animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info); }
		);		
		now = Date.now();
		delta = now - previous;
		if (delta > interval) {        
			/* Just `previous = now` is not enough.
			Lets say we set fps at 10 which means
			each frame must take 100ms
			Now frame executes in 16ms (60fps) so
			the loop iterates 7 times (16*7 = 112ms) until
			delta > interval ===...