Meet requestAnimationFrame
We'll cover the following...
Making your animations run smoothly depends on a lot of factors. It depends on what else is going in your page. It depends on what other animations might be running in parallel. It depends on whether the user is interacting with the page by clicking or typing. It depends on what browser you are using and when it decides to repaint or update what is shown on the screen.
Traditionally, you may have used a function like setInterval
or its funnier cousin setTimeOut
to power your animation loop. The problem with these two ...