Simple Linear Easing

by Noreh AD

HTML

<div id="box"></div>

CSS

body {
	background: gainsboro;
}
#box {
	width: 100px;
	height: 100px;
	background: white;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	position: absolute;
	left: 0;
}

JavaScript

var box = document.getElementById("box");

var fps					  = 60;
var duration		  = 2;																		// seconds
var iterations	  = fps * duration;												// 120 frames
var startPosition = 0;																	  // left end of the screen
var endPosition	  = window.innerWidth - box.clientWidth;	// right end of the screen
var distance		  = endPosition - startPosition;					// total distance
var timeIncrement = duration / iterations;
var position		  = 0;
var time		      = 0;

function move() {
	time += timeIncrement;
	position = linear(time, startPosition, distance, duration);
	if (position >= endPosition) {
		clearInterval(handler);
		box.style.left = endPosition + "px";
		return;
	}
	box.style.left = position + "px";
}

var handler = setInterval(move, 1000/fps);

function linear(time, begin, change, duration) {
	return change * (time / duration) + begin;
}