Remember: Run your animations with requestAnimationFrame

Why do you want to start with requestAnimationFrame, instead of passing in a time value?

1. performance.now is not widely supported
2. Date.now() may not give you the same format as used by requestAnimationFrame. In fact most cases where requestAnimationFrame is natively supported it doesn't.
3. Starting your animation with it insures that it passes in the correct time format.

So use it.

	//Pseudo code
	var id;
	animate = function(time){
	//Eval time
	if(somethingDoneWithTimeIsTrue){
	requestAnimationFrame(step)
	}
	}
	pause = function(time){
	//some pause function
	}
	resume = function(time){
	//some function to resume animation
	}
	//Don't do this
	animate( performance.now() || Date().getTime() )
	pause( performance.now() || Date().getTime() )
	resume( performance.now() || Date().getTime() )
	//Do this
	window.requestAnimationFrame( animate )
	window.requestAnimationFrame( pause )
	window.requestAnimationFrame( resume )

view raw gistfile1.js hosted with ❤ by GitHub

Need a polyfill use this one by +Paul Irish  .

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
	// MIT license
	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];
	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
	|| window[vendors[x]+'CancelRequestAnimationFrame'];
	}
	if (!window.requestAnimationFrame)
	window.requestAnimationFrame = function(callback, element) {
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0, 16 - (currTime - lastTime));
	var id = window.setTimeout(function() { callback(currTime + timeToCall); },
	timeToCall);
	lastTime = currTime + timeToCall;
	return id;
	};
	if (!window.cancelAnimationFrame)
	window.cancelAnimationFrame = function(id) {
	clearTimeout(id);
	};
	}());

view raw rAF.js hosted with ❤ by GitHub