Web animations can be implemented through several mechanisms, including JavaScript timers (setTimeout, setInterval), CSS3 properties (transition, animation), the HTML <canvas> element, and the requestAnimationFrame API. While timers and CSS handle many standard use cases, requestAnimationFrame provides a dedicated, performance-optimized approach for JavaScript-driven visual updates.

Core Mechanism of requestAnimationFrame

The requestAnimationFrame method schedules a function to run immediately before the browser performs its next repaint. It accepts a single callback parameter. Unlike recursive timer calls, a single invocation only triggers the callback once. To sustain a continuous animation loop, the callback must recursively schedule itself.

let frameIndex = 0;

function renderLoop() {
  frameIndex++;
  console.log(`Rendering frame: ${frameIndex}`);
  requestAnimationFrame(renderLoop);
}

requestAnimationFrame(renderLoop);

Execution Frequency and Timestamps

The callback typically executes at 60 frames per second, aligning automatically with the display's native refresh rate. The browser passes a DOMHighResTimeStamp to the callback, representing the precise time the current frame batch began processing. All callbacks scheduled within the same paint cycle receive an identical timestamp, regardless of execution order or computational overhead. The value is measured in milliseconds with microsecond precision.

function trackTime(frameStartTime) {
  console.log(`Frame initiated at: ${frameStartTime}ms`);
  requestAnimationFrame(trackTime);
}

requestAnimationFrame(trackTime);

Performance Optimization and Lifecycle Control

Browsers automatically throttle requestAnimationFrame calls in inactive tabs or hidden <iframe> elements to conserve CPU cycles and battery life. Developers can also manually manage the animation lifecycle.

Canceling an Animation

Invoking requestAnimationFrame returns a unique numeric identifier. Passing this ID to cancelAnimationFrame halts the loop immediately.

const startBtn = document.getElementById('startTrigger');
const stopBtn = document.getElementById('stopTrigger');
let animationHandle = null;

function updateScene() {
  animationHandle = requestAnimationFrame(updateScene);
  console.log(`Active animation ID: ${animationHandle}`);
}

startBtn.addEventListener('click', () => {
  if (!animationHandle) {
    animationHandle = requestAnimationFrame(updateScene);
  }
});

stopBtn.addEventListener('click', () => {
  if (animationHandle) {
    cancelAnimationFrame(animationHandle);
    animationHandle = null;
  }
});

Conditional Termination

Animations can also be stopped programmatically by evaluating state or elapsed time within the loop itself.

function limitedRun(currentTime) {
  console.log(`Processing at ${currentTime}`);
  if (currentTime < 800) {
    requestAnimationFrame(limitedRun);
  }
}

requestAnimationFrame(limitedRun);

Practical Animation Implementation

The following example demonstrates animating an element's width using the frame loop, with explicit start and pause controls.

<style>
  #progressBar {
    height: 40px;
    width: 0;
    background-color: #3b82f6;
  }
</style>

<button id="startTrigger">Play</button>
<button id="stopTrigger">Pause</button>
<div id="progressBar"></div>

<script>
  const playBtn = document.getElementById('startTrigger');
  const pauseBtn = document.getElementById('stopTrigger');
  const bar = document.getElementById('progressBar');
  let rafId = null;
  let currentWidth = 0;

  function expandBar() {
    currentWidth += 0.5;
    if (currentWidth > 100) currentWidth = 0;
    bar.style.width = `${currentWidth}%`;
    rafId = requestAnimationFrame(expandBar);
  }

  playBtn.addEventListener('click', () => {
    if (!rafId) rafId = requestAnimationFrame(expandBar);
  });

  pauseBtn.addEventListener('click', () => {
    if (rafId) {
      cancelAnimationFrame(rafId);
      rafId = null;
    }
  });
</script>

Comparision with Alternative Approaches

JavaScript Timers: setTimeout and setInterval operate independently of the browser's rendering cycle. They queue tasks on the main thread, which can be delayed by other synchronous operations. Intervals shorter than ~16.7ms often cause frame drops or unnecessary repaints, leading to visual jank and inefficient resource consumption. requestAnimationFrame synchronizes directly with the display refresh rate, preventing over-drawing and ensuring consistent visual updates.

CSS3 Animations: While transition and @keyframes are highly optimized for standard property changes, they lack direct control over non-CSS properties like scrollTop or complex physics-based calculations. Additionally, CSS easing functions are limited to predefined cubic-bezier curves. requestAnimationFrame bridges this gap by enabling arbitrary JavaScript logic synchronized with the paint cycle.

Building a Custom Interval Ticker

requestAnimationFrame can replace traditional timers for precise interval execution by tracking elapsed time between frames.

let previousTimestamp = performance.now();
let accumulatedDelay = 0;

function scheduleTick(currentTimestamp) {
  const delta = currentTimestamp - previousTimestamp;
  previousTimestamp = currentTimestamp;
  accumulatedDelay += delta;

  processInterval(accumulatedDelay);

  requestAnimationFrame(scheduleTick);
}

function processInterval(totalElapsed) {
  if (totalElapsed >= 1000) {
    console.log('One second elapsed');
    accumulatedDelay = 0;
  }
}

requestAnimationFrame(scheduleTick);