Retrieving requestAnimationFrame with JavaScript
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!
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Introducing MooTools HeatMap]()
It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking. With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...
![Create a Dynamic Flickr Image Search with the Dojo Toolkit]()
The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...
According to caniuse, Microsoft’s browsers never had a vendor prefixed version of
requestAnimationFrame
, so we can just keepmoz
andwebkit
.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 sinceperformance.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
:(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
.