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