RequestAnimationFrame in JavaScript

The requestAnimationFrame() method tells the browser you wish to perform an animation, and request to call an animation function to update an animation before the next repaint. Here’s what you need to know.

Written by Suprabha
An person working on an animation.
Image: Shutterstock / Built In
Brand Studio Logo
UPDATED BY
Brennan Whitfield | Mar 18, 2025
Summary: 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 enables smoother animations, reduces CPU load in inactive tabs and offers better performance than setInterval().

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.

 

A tutorial on requestAnimationFrame in JavaScript. | Video: freeCodeCamp.org

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.

More on JavaScript: 8 Common JavaScript Data Structures

 

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)

More on JavaScript: What Are JavaScript Algorithms and Data Structures?

 

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.

Code animation results

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

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.

No, requestAnimationFrame() only runs the callback function once per call. To create continuous animations, the callback must call requestAnimationFrame() recursively.

Unlike setInterval(), requestAnimationFrame() synchronizes animations with the browser’s refresh rate, resulting in smoother motion and reduced CPU usage in inactive tabs.

Explore Job Matches.