Request Animation Frame


Updated Jul 12th, 2022

Method that exists on the window object that allows you to do a more accurate version of “setInterval.”

Stunt man punching metaphor. Timing is crucial. Every time the browser is going to be repainted, here’s a function we want to run. Results in a smoother transition.

Need to set up a function to recursively call itself. We use a counter and a conditional to have it stop at some point based on the number of iterations or window width, etc.

Note: Can drop the word window from window.requestAnimationFrame. This is optional.

If the tab goes into the background, like a user switch tabs and then returns, the browser will pause the animation until the user returns. Pretty cool.

There is a also a high resolution timestamp you can console out to see, in milliseconds, how long the animation function takes to run.

Also “cancelAnimationFrame” method.


Steve Griffith here