Meet requestAnimationFrame
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 functions is simple. They don’t understand the subtleties of working with the browser and getting things to paint at the right time. They have no awareness of what is going on in the rest of the page. These qualities made them very inefficient when it came to powering animations because they often request a repaint/update that your browser simply isn’t ready to do. You would often end up with skipped frames and other horrible side effects.
If setInterval
and setTimeOut
went out on a date, they would probably be heckled quite a bit. Despite how bad setInterval
and setTimeOut
were for working with animations, you had no real alternatives. You had to use them. This lack of better alternatives left animations created via JavaScript looking a little less polished when compared to animations created in CSS or via a dedicated runtime like Flash.
Fortunately, things changed. Given how important animations are for creating great looking applications and sites, the major browser vendors (starting with Mozilla) decided to address this problem in an elegant way. Instead of burdening you with having to deal with all of the issues related to creating a smooth animation in JavaScript using setInterval
or setTimeOut
, they created a function called requestAnimationFrame
that handles all of those issues for you.
What makes requestAnimationFrame
so awesome is that it doesn’t force the browser to do a repaint that may never happen. Instead, it asks the browser nicely to call your animation loop when the browser decides it is time to redraw the screen. This results in no wasted work by your code on screen updates that never happen. Skipped frames are a thing of the past. Best of all, because requestAnimationFrame
is designed for animations, your browser optimizes the performance to ensure your animations run smoothly depending on how much system resources you have available, whether you are running on battery or not, whether you switch away to a different tab, and so on.
Words haven’t been invented in the English language to describe how awesome the requestAnimationFrame
function is.
Get hands-on with 1200+ tech skills courses.