Using the native requestAnimationFrame() method in JavaScript, we can make our browser call and repeat an animation function very quickly forever.
What Is requestAnimationFrame?
RequestAnimationFrame() is an animation method in JavaScript that tells the browser to call a specific function and update the animation before the next repaint. It optimizes how animation frames are rendered by syncing with the browser's refresh rate, allowing the animations to run more smoothly.
requestAnimationFrame() is one shot; your callback routine itself must call requestAnimationFrame() again if you want to animate another frame at the next repaint. It takes one argument, the callback.
Here’s what you need to know.
RequestAnimationFrame Syntax
window.requestAnimationFrame(callback);callback is the function called when it’s time to update your animation for the next repaint.
Animations with requestAnimationFrame() are non-blocking, which means if you make subsequent calls to requestAnimationFrame(), the resulting animations will be scheduled accordingly within the next repaint cycle to ensure efficiency.
Advantages of requestAnimationFrame
Though it can vary based on system performance, the goal is for smooth animation to appear at 60 frames per second (fps).
We could write our animation code like this:
setInterval(() => {
// animation code
}, 1000/60);But using requestAnimationFrame() is more effective for two reasons:
- Its animations are smoother because the function is optimized.
- Animations in the inactive tabs will throttle or stop running, which allows reduced CPU usage.
Let’s see how can we create the above snippet using requestAnimationFrame():
function smoothAnimation() {
// animation
requestAnimationFrame(smoothAnimation)
}
requestAnimationFrame(smoothAnimation)
How to Use requestAnimationFrame
requestAnimationFrame() also returns an ID you can use to cancel it.
let reqAnimationId;
function smoothAnimation() {
// animation
reqAnimationId = requestAnimationFrame(smoothAnimation)
}
// to start animation
function start() {
reqAnimationId = requestAnimationFrame(smoothAnimation)
}
// to end animation
function end() {
cancelAnimationFrame(reqAnimationId)
}
console.log("reqAnimationId", reqAnimationId)Check out the demo to see it in action.
If you do any animation on a browser and want it to be optimized, then I would highly recommend using the requestAnimationFrame() web API.
Frequently Asked Questions
What is requestAnimationFrame()?
requestAnimationFrame() is a JavaScript method that tells the browser you want to perform an animation, and requests the browser to call a callback function to update the animation before the next repaint. It syncs with the browser's refresh rate, optimizing how animation frames are rendered and ensuring smooth animation performance.
Does requestAnimationFrame() automatically repeat the animation?
No, requestAnimationFrame() only runs the callback function once per call. To create continuous animations, the callback must call requestAnimationFrame() recursively.
How is requestAnimationFrame() different from setInterval()?
Unlike setInterval(), requestAnimationFrame() synchronizes animations with the browser’s refresh rate, resulting in smoother motion and reduced CPU usage in inactive tabs.
