Skip to content

Instantly share code, notes, and snippets.

@jalbam

jalbam/requestAnimationFrame-polyfill.js

Last active April 26, 2025 03:30
Show Gist options
  • Save jalbam/5fe05443270fa6d8136238ec72accbc0 to your computer and use it in GitHub Desktop.
Save jalbam/5fe05443270fa6d8136238ec72accbc0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jalbam revised this gist Jul 23, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion requestAnimationFrame-polyfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@
    window.requestAnimationFrame = function(callback, element)
    {
    var now = window.performance.now();
    var nextTime = Math.max(lastTime + 16, now); //First time will execute it but barely noticeable and performance is gained.
    var nextTime = Math.max(lastTime + 16, now); //First time will execute it immediately but barely noticeable and performance is gained.
    return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now);
    };
    window.cancelAnimationFrame = clearTimeout;
  2. jalbam revised this gist Jul 23, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion requestAnimationFrame-polyfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@
    window.requestAnimationFrame = function(callback, element)
    {
    var now = window.performance.now();
    var nextTime = Math.max(lastTime + 16, now);
    var nextTime = Math.max(lastTime + 16, now); //First time will execute it but barely noticeable and performance is gained.
    return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now);
    };
    window.cancelAnimationFrame = clearTimeout;
  3. jalbam revised this gist Jul 22, 2019. No changes.
  4. jalbam revised this gist Jul 22, 2019. No changes.
  5. jalbam revised this gist Jul 21, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions requestAnimationFrame-polyfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,7 @@
    // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
    // Added high resolution timing. This window.performance.now() polyfill can be used: https://gist.github.com/jalbam/cc805ac3cfe14004ecdf323159ecf40e
    // MIT license
    // Gist: https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
    (function() {
    var vendors = ['webkit', 'moz', 'ms', 'o'], vp = null;
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame && !window.cancelAnimationFrame; x++)
  6. jalbam created this gist Jul 21, 2019.
    29 changes: 29 additions & 0 deletions requestAnimationFrame-polyfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    '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 https://gist.github.com/paulirish/1579671 which derived from
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
    // Added high resolution timing. This window.performance.now() polyfill can be used: https://gist.github.com/jalbam/cc805ac3cfe14004ecdf323159ecf40e
    // MIT license
    (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 = window.performance.now();
    var nextTime = Math.max(lastTime + 16, now);
    return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now);
    };
    window.cancelAnimationFrame = clearTimeout;
    }
    }());