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 may, in turn, determine the best way to schedule a redraw.

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);
})();