Suggest an edit

Improve this article

Refine the answer for “What does requestAnimationFrame() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition

`requestAnimationFrame(callback)` is a built-in browser API
that **schedules the `callback` function to run before the next repaint** (before the "screen redraw").

---

## What this means in practice

When the browser is about to repaint the screen (typically ~60 times per second, i.e. every 16.6 ms),
it calls your callback from `requestAnimationFrame` **at the optimal moment**,
so the animation looks as smooth as possible without jank.

---

## Example

```javascript
function animate(time) {
  console.log('Frame at', time, 'ms');
  requestAnimationFrame(animate); // request the next frame
}

requestAnimationFrame(animate);
```

**What happens here:**

- `animate` is called before every repaint;
- `time` is a *timestamp* (in milliseconds) showing
when the frame's repaint actually started (per `performance.now()`).

---

## How this works under the hood

1. You call `requestAnimationFrame(fn)`;
2. The function `fn` is stored by the browser;
3. When the browser is ready to draw a new frame (usually after 16 ms),
it calls all such functions **right before repainting**;
4. After the callback runs, the browser repaints the screen.

If you call `requestAnimationFrame()` again inside the callback,
the animation runs **in a loop**, frame after frame.

---

## Example: smooth element movement

```javascript
const box = document.querySelector('.box');
let start = null;

function move(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  box.style.transform = `translateX(${progress / 5}px)`;

if (progress < 2000) { // 2 seconds
    requestAnimationFrame(move);
  }
}

requestAnimationFrame(move);
```

Here the element moves smoothly over 2 seconds.
And the browser optimizes calls itself: if the tab isn't visible,
`requestAnimationFrame` **pauses** so it doesn't waste resources.

---

## Difference from `setTimeout` / `setInterval`

| Criterion | `setTimeout / setInterval` | `requestAnimationFrame` |
|---|---|---|
| Frequency | Fixed (for example, every 16 ms) | Synchronized with the screen refresh rate |
| Power usage | Not paused in background tabs | Automatically stops when the tab is hidden |
| Smoothness | Can "stutter" under load | Maximally smooth repainting |
| Usage | Timers, background tasks | Animations, smooth UI updates |
| Passes a timestamp | No | Yes (`performance.now()` frame time) |

---

## Comparison example

```javascript
function moveWithTimeout() {
  box.style.left = `${parseInt(box.style.left || 0) + 1}px`;
  setTimeout(moveWithTimeout, 16);
}

function moveWithRaf() {
  box.style.left = `${parseInt(box.style.left || 0) + 1}px`;
  requestAnimationFrame(moveWithRaf);
}
```

`setTimeout` doesn't account for browser load and can "skip" frames.
`requestAnimationFrame` adapts to the display's refresh rate and is always as smooth as possible.

---

## Canceling a call

If you need to cancel a scheduled frame:

```javascript
const id = requestAnimationFrame(step);
cancelAnimationFrame(id);
```

---

## SUMMARY

| Property | Description |
|---|---|
| **What it does** | Runs a callback before the next repaint |
| **When it's called** | When the browser is ready to draw a new frame (~60 FPS) |
| **Function argument** | `timestamp` - the frame's start time |
| **Returns** | A frame ID (for `cancelAnimationFrame`) |
| **Stops automatically** | Yes, when the tab is inactive |
| **Task type** | A separate queue for visual updates (before rendering) |
| **Ideal for** | Animations, smooth transforms, progress bars |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts515 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.