requestAnimationFrame demo
- Browser can optimise concurrent animations together into a single reflow and repaint cycle.
- Key difference is requesting the browser to draw your animation at the next available opportunity, not at a predetermined interval (setInterval).
- If running the animation loop in a tab that’s not visible, the browser won’t keep it running
- Saves CPU cycles and reduces battery consumption.
- Polyfill available at: gist.github.com/paulirish/1579671
Refs
- www.paulirish.com/2011/requestanimationframe-for-smart-animating
- css-tricks.com/using-requestanimationframe/
- www.html5rocks.com/en/tutorials/speed/animations/
- creativejs.com/resources/requestanimationframe/