USING requestAnimationFrame

For a long time, timers and intervals have been the state of the art for JavaScript-based animations. While CSS transitions and animations make some animations easy for web developers, little has changed in the world of JavaScript-based animation over the years. Firefox 4 was the first browser to include a new API for JavaScript animations called mozRequestAnimationFrame(). This method indicates to the browser that an animation is taking place so that the browser can, in turn, determine the best way to schedule a redraw. Since its introduction, the API gained widespread adoption and is now available across all major browsers as requestAnimationFrame().

Early Animation Loops

The typical way to create animations in JavaScript is to use setInterval() to manage all animations. A basic animation loop using setInterval() looks like this:

(function() {
 function updateAnimations() {
 doAnimation1();
 doAnimation2();
 //etc.
 }
 setInterval(updateAnimations, 100...