Skip to content
Create a gist now

Instantly share code, notes, and snippets.

@rma4ok /rAF.js

requestAnimationFrame polyfill
// requestAnimationFrame polyfill by @rma4ok
!function (window) {
equestAnimationFrame = 'equestAnimationFrame',
requestAnimationFrame = 'r' + equestAnimationFrame,
ancelAnimationFrame = 'ancelAnimationFrame',
cancelAnimationFrame = 'c' + ancelAnimationFrame,
expectedTime = 0,
vendors = ['moz', 'ms', 'o', 'webkit'],
while (!window[requestAnimationFrame] && (vendor = vendors.pop())) {
window[requestAnimationFrame] = window[vendor + 'R' + equestAnimationFrame];
window[cancelAnimationFrame] =
window[vendor + 'C' + ancelAnimationFrame] ||
window[vendor + 'CancelR' + equestAnimationFrame];
if (!window[requestAnimationFrame]) {
window[requestAnimationFrame] = function (callback) {
currentTime = +new Date,
adjustedDelay = 16 - (currentTime - expectedTime),
delay = adjustedDelay > 0 ? adjustedDelay : 0;
expectedTime = currentTime + delay;
return setTimeout(function () {
}, delay);
window[cancelAnimationFrame] = clearTimeout;

Mind helping me understand the reason behind this?

  equestAnimationFrame = 'equestAnimationFrame',
  requestAnimationFrame = 'r' + equestAnimationFrame,

looks odd :)


@wamatt for better minification i would say...


and why use !function in the first line? :)


@ddon calling an anonymous function the bang converts it to an expression from a function declaration.


Mhh, since +new Date is slower than (new Date).getTime(). I would recommend to use the latter.

...and by the way, most modern browsers (i.e. IE9+) support so we can use it and fallback to getTime().


@yckart , how it helps in minification, it's just variable reuse only



Since 'requestAnimationFrame' starts with capital 'R' in vendor-prefixed funtion names like 'webkitRequestAnimationFrame' and it is used multiple times, it's better to use in that way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.