Working With JavaScript Animations Using ‘requestAnimationFrame’
Build smooth animations for your websites
There are several known ways to work with animation in JavaScript. For example, you can use a timer function — setTimeout or setInterval and update styles every few milliseconds.
setInterval(() => {
// animation code
}, time);Another approach is to create a loop that changes styles as often as possible while the animation is running. The logic behind both approaches is to give the browser a large number of frames of animation and hope it renders smooth motion.
The problem here is that in order for the animations to be smooth the browser often has to paint frames quicker than the screen can display them (most computer screens have a refresh rate of 60 frames per second or FPS and only last time began to appear with a higher frequency 120FTP). This results in unnecessary computation.
Another problem with using setInterval or setTimeout is that the animations will continue to run even if the page is not visible to the user.
In fact, it’s better to display fewer frames per second, but keep this number constant. Our eye perceives small deviations in frequency, and a few dropped frames hurt the eye more than a lower number of frames per second. This is where the built-in HTML5 requestAnimationFrame API comes in.
About requestAnimationFrame
requestAnimationFrame is an API that does exactly what you would hope for: it passes the responsibility of scheduling animation drawing directly to the browser.
The browser can do it better because, well, it knows what’s going on inside the browser. RequestAnimationFrame is part of W3C’s Timing control for script-based animations API.
Syntax:
window.requestAnimationFrame(callback);callback: The function to call when it’s time to update your animation for the next repaint.
Advantages requestAnimationFrame
- The animation looks smoother as the frame rate stays constant.
- The processor is not overloaded with rendering tasks but can handle other tasks while rendering the animation. In general, the browser can determine the frame per the second level that is optimal for the tasks that the browser performs at the same time as the animation.
- Works with the refresh rate of the image on the monitor — a parameter that determines how long it takes the monitor to display a new frame.
- if the current browser tab is no longer in focus, requestAnimationFrame will stop performing animation operations.
How can you start and stop animation
requestAnimationFrame returns an ID you can use to cancel it.
Browser Support
Browser support for requestAnimationFrame is reasonably good. Supported in all modern browsers full support is available in the following browsers from versions:
- Opera: unprefixed since version 15
- Chrome: unprefixed since version 24
- Safari: unprefixed since version 6.1
- Firefox: with prefixed since version 11 , full since version 23
- Edge: since version 12
- IE: since version 10
But if you need support for older browsers, you can use polyfill. Of course, you won’t see the benefits of the new API in the browser, but as animations work in them, through the traditional timer function.
Example with using requestAnimationFrame
Now that you understand the benefits of requestAnimationFrame, let’s see how to use it.
As an example, consider the animation of the rotation of the planets of the solar system around the sun. We will start, stop and reset our animation using buttons.
Let’s start by creating a script, the first thing we need to do is create parameters for each planet:
Next, we need to create an object for each planet using the constructor function, methods for calculating a new position, and the reset function:
Next, we need to create our planets and calculate the starting position.
Next, we need to create a function that will be animate our planets, as mentioned above, we need to call the animation function recursively using requestAnimationFrame.
Finally, we create event handlers for the buttons that will start, stop and reset our animation. It doesn’t have to be buttons, you can add handlers to anything
That’s all our script is ready, the full code including Html and CSS can be viewed on Codepen.
Final Notes
We have discussed how the requestAnimationFrame method makes it very easy for developers to create smooth JavaScript animations for their websites.
By delegating animation frames to the browser, you can take advantage of several optimizations, all of which result in less resource usage. How to use it in a way that will successfully work in all browsers.
Thanks for reading the article. I hope this was helpful for you.
