Javascript Animation Without jQuery

Use any easing function from the jQuery plugin without relying on any js library.

by Hugo Carneiro

HTML

<!-- element to animate -->
<div id="test"/>

CSS

/* initial positioning */
#test{
    position:absolute;
    left:10px;
    top:10px;
    width:20px;
    height:20px;
    background-color:blue;
    border-radius:50%;
}

JavaScript

// easing function
function easeInOutExpo(x, t, b, c, d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}

// setup
var test = document.getElementById('test');
var start = new Date().getTime();
var from = test.offsetLeft;
var to = 300;
var duration = 150;

// animation
(function animate(){
	var now = (new Date().getTime() - start);
	var ease = easeInOutExpo(0, now, 0, 1, duration);
	test.style.left = (from + (to - from) * ease)+'px';
	if(now < duration){
	    setTimeout(animate, 1000/60);
	}
})();