Skip to content

Instantly share code, notes, and snippets.

Last active March 22, 2024 00:00
Show Gist options
  • Save paulirish/1579671 to your computer and use it in GitHub Desktop.
Save paulirish/1579671 to your computer and use it in GitHub Desktop.
requestAnimationFrame polyfill
// 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); },
lastTime = currTime + timeToCall;
return id;
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
Copy link

Hi Vennapusaravali,

More suitable for the Angular 4 repo, however if you checkout this JS file and add the script to angular-cli.jsons "scripts": [ ".../path/to/this/file/rAF.js" ] it should load correctly. More info can be found here.

Copy link

Hello, can someone help me with a question in my website? I don't know where is the issue list, or who I can ask. My website is not working the parallax.js (

Thanks advice

Copy link

Hi guys,

Anyone know the answer to this question: ? Would like to hear a professional opinion.


Copy link

smrtrnx commented Jan 19, 2019

I've been reading a lot of the comments but I am kinda bit confused now which code to be implemented.

Copy link

jalbam commented Jul 21, 2019


I just adapted Paul Irish's polyfill to work with high resolution timing automatically (when possible) and improved the performance a little bit.

It can work with the following polyfill:

Here it is:

'use strict';

// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavic, Darius Bacon and Joan Alba Maldonado.
// Adapted from which derived from
// Added high resolution timing. This polyfill can be used:
// MIT license
// Gist:
(function() {
	var vendors = ['webkit', 'moz', 'ms', 'o'], vp = null;
	for (var x = 0; x < vendors.length && !window.requestAnimationFrame && !window.cancelAnimationFrame; x++)
		vp = vendors[x];
		window.requestAnimationFrame = window.requestAnimationFrame || window[vp + 'RequestAnimationFrame'];
		window.cancelAnimationFrame = window.cancelAnimationFrame || window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
	if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) //iOS6 is buggy.
		var lastTime = 0;
		window.requestAnimationFrame = function(callback, element)
			var now =;
			var nextTime = Math.max(lastTime + 16, now);
			return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now);
		window.cancelAnimationFrame = clearTimeout;

You can found it in this gist:

Any comments are welcome. Thank you very much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment