requestAnimationFrame() API

What is the requestAnimationFrame() API, and how can it be used to set up an animation loop?

Creating smooth animations on a web page can be tricky, especially if you’re not sure how to handle timing properly. The great news is that the requestAnimationFrame() API makes it easier.  … requestAnimationFrame() is a method that allows you to schedule the next step of your animation before the next screen repaint, resulting in a fluid and visually appealing experience.

The next screen repaint refers to the moment when the browser refreshes the visual display of the web page. This happens multiple times per second, typically around 60 times (or 60 frames per second) on most displays.

To use the requestAnimationFrame() method, all you need to do is to call it and pass a callback function into it:

requestAnimationFrame(callback);

Calling requestAnimationFrame() must first occur inside a function that handles the animation, such as animate(), along with a function to update the animation, traditionally called update():

function animate() {
 // Update the animation...
 // for example, move an element, change a style, and more.
 update();
 // Request the next frame
 requestAnimationFrame(animate);
}

The update() function is where the magic happens. Inside it, you get to change whatever you want to animate. For example, updating a style or changing the position of an element:

function update() {
 element.style.transform = `translateX(${position}px)`;
 position += 2;
}

What finally kicks off the animation is calling requestAnimationFrame() and passing in the animate function, this time outside the animate function:

requestAnimationFrame(animate);

The loop will continue until you stop it.

Now, let’s take a look at another example. The HTML for this example is a div element with the text freeCodeCamp is Awesome:

<div id="rect" class="rect">freeCodeCamp is Awesome</div>

This is the CSS that makes the div a rectangle and hides anything that goes out of the viewport on the left or right:

body {
  overflow-x: hidden;
}
 
.rect {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 250px;
  border-radius: 5px;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-size: 2rem;
  position: absolute;
}

This is the commented JavaScript that moves the rectangle 2px to the right at every call of requestAnimationFrame(animate) with the animate function as a callback:

// reference the rectangle
const rect = document.getElementById("rect");
 
// start with a position of 0
let position = 0;
 
function update() {
  // Move the rectangle 2px to the right
  rect.style.left = position + "px";
  position += 2;
 
  // Reset the position when the rectangle reaches
  // the right side of the screen
  if (position > window.innerWidth) {
    // Move the rectangle just outside the left side of the screen
    position = -rect.offsetWidth;
  }
}
 
function animate() {
  // Update the position
  update();
 
  //request the next frame
  requestAnimationFrame(animate);
}
 
// Start the animation
requestAnimationFrame(animate);

The result in the browser will be an animated title card floating across the screen.