Retrieving requestAnimationFrame with JavaScript

By  on  

The requestAnimationFrame function has been a major boost to developers creating and managing animations with JavaScript.  Paul Irish has an excellent introduction on requestAnimationFrame -- I highly recommend you read it.  This HTML5Hub post is also very good.  Most browsers now support the animation function but in the case a browser doesn't, you can shim a rough equivalent with setInterval:

var requestAnimationFrame = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(callback) { return setTimeout(callback, 1000 / 60); };

requestAnimationFrame was implemented with browser prefixes so we'll check for those if the unprefixed window method isn't there.  If no native implementation exists, a setInterval shim will have to do!

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Form Element AJAX Spinner Attachment Using MooTools

    Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

Discussion

  1. MaxArt

    According to caniuse, Microsoft’s browsers never had a vendor prefixed version of requestAnimationFrame, so we can just keep moz and webkit.

    That’s a very common way to normalize the function, but in most recent implementations requestAnimationFrame passes an argument to the callback function, which is the amount of milliseconds since performance.timing.navigationStart, with micro precision too. This can be very handy for the callback.

    It’s not really possible to perfectly emulate this, but you can get something close if you take note of the epoch time as soon as the script is executed. So this is how I used to polyfill requestAnimationFrame:

    (function(start) {
        window.requestAnimationFrame = function(callback) {
            return setInterval(function() {
                callback(new Date().getTime() - start);
            }, 1000 / 60);
        };
    })(new Date().getTime());
    

    (Well, not exactly… since most of the times requestAnimationFrame is called again in the callback function, but the function itself takes some milliseconds at least to be executed – because it probably involves some kind of repaint – and you should adjust the time interval accordingly, or you may never hope to even get close to 60 fps.)

    Also, don’t forget to normalize cancelAnimationFrame, which has a nasty variant in some (and maybe forgotten?) WebKit browsers: webkitCancelRequestAnimationFrame.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!