Animating with requestAnimationFrame

by kirupa | 22 October 2015

When you are creating an animation, it goes without saying that you want your animation to run smoothly and fluidly when someone is viewing it. If you are using CSS Animations, then you have nothing to worry about. Your browser takes care of everything for you. If you are creating your animation using JavaScript, things are a bit different. Instead of the browser giving you some assistance, you are left on your own. It is up to you to make sure your animation runs smoothly while at the same time taking into account the various factors that could affect your animation's performance. Factors such as other things happening on the page. Factors such as your laptop / phone / tablet going into battery mode and halving its performance reduced. Factors such as another tab taking focus. You get the point.

This is a companion discussion topic for the original entry at

A collection of requestAnimationFrame-related topics that have come up:

  1. When does requestAnimationFrame actually run?

We’ll keep updating this as more topics come up :slight_smile: