JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<div id="animated"></div>

CSS

#animated {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: purple;
    box-shadow: 0 0 11px #000;
    position: absolute;
    top: 10px;
}

JavaScript

function now() {
	return new Date().getTime();
}

function animate (handler, totalAnimationTime) {
	var animationStartTime;

	animationStartTime = now();
	(function animationTic () {
		var ticCallDate;
		var progressPercent;
		var timeProgress;

		ticCallDate = now();

		timeProgress = ticCallDate - animationStartTime;
		progressPercent = timeProgress / totalAnimationTime;
		if (progressPercent > 1) {
			progressPercent = 1;
		} else {
			setTimeout(animationTic, 16);
		}
		handler(progressPercent);
	}());
}


function doAnimation () {
	var startValue;
	var endValue;
	var animatedNode;
	
	startValue = 0;
	endValue = 200;
	animatedNode = document.getElementById('animated');
    
	animate(function (progress) {
		animatedNode.style.left = (startValue + (progress * endValue)) + 'px';
	}, 500)
}

document.onclick = function () {
    doAnimation();
}