RequestAnimationFrame in JavaScript

requestAnimationFrame is a method in JavaScript that allows you to create smooth animations by telling the browser to execute a callback function before the next repaint. It is a more efficient and accurate alternative to using setTimeout or setInterval for animations because it synchronizes with the browser’s refresh rate.

Understanding the concept of frame rate is crucial when creating animations with requestAnimationFrame. Frame rate refers to the number of times the animation is updated per second, typically measured in frames per second (fps). A higher frame rate generally results in smoother animation but requires more computational resources, which can affect the performance of the page. Conversely, a lower frame rate may result in choppier animation, but it can be more efficient in terms of resource usage.

How It Works

Callback Execution: You pass a function to requestAnimationFrame, and the browser will call this function right before the next frame is rendered. This ensures that your animations run at the optimal time, providing smoother results.

Frame Rate Synchronization: The timing of requestAnimationFrame is based on the display refresh rate (typically 60 times per second for most screens). This means that the callback function is executed approximately every 16.7 milliseconds, which aligns with the frame rate of most displays.
requestAnimationFrame takes one argument, only callback.
requestAnimationFrame was developed to overcome the shortcomings of the setInterval/setTimeout approach providing a native API to run any type of animation. It takes in a function as its argument and tells the browser to execute that function before the next repaint.

It is very similar to setInterval except we are requesting the browser to execute the animation at the next available opportunity instead of predefined interval.

Basic Example:

Here’s a simple example of how to use requestAnimationFrame to animate a square moving across the screen:

let box = document.getElementById('box');
let position = 0;

function animate() {
  position += 1;
  box.style.transform = `translateX(${position}px)`;

  if (position < window.innerWidth - 100) {  // Stop when the box reaches the edge of the screen
    requestAnimationFrame(animate);  // Request the next frame
  }
}

// Start the animation
requestAnimationFrame(animate);

In this example:

We move the box element 1 pixel to the right on each frame.
The animate function is recursively called via requestAnimationFrame as long as the box hasn’t reached the edge of the screen.

Canceling an Animation:

You can cancel a scheduled animation frame by using cancelAnimationFrame and passing the ID returned by requestAnimationFrame.

let animationId = requestAnimationFrame(animate);

// To cancel the animation
cancelAnimationFrame(animationId);

You may also like this:

• 4 Ways to Make an API Call in JavaScript

Conclusion:

requestAnimationFrame is the preferred method for performing animations in JavaScript, as it offers better performance and smoother visuals by allowing the browser to optimize frame rendering. It’s essential for creating responsive and visually appealing web animations.