DOM Animation

JavaScript DOM Animation: requestAnimationFrame vs CSS Animations

Dynamic web animations can be driven by CSS transitions, CSS @keyframes, or JavaScript loops. For high-performance 60fps JavaScript animations, window.requestAnimationFrame() syncs frame rendering with browser screen refresh rates.

Animation Pipeline Comparison

flowchart TD
    AnimType["Animation Architecture"] --> CSSAnim["CSS Transitions / Keyframes (GPU-Accelerated)"]
    AnimType --> RAF["requestAnimationFrame() (60fps JS Engine Loop)"]
    AnimType --> LegacyTimer["setInterval / setTimeout (Un-synced / Laggy)"]

Animation Methods Reference

Practical Code Example

// Demonstrating 60fps Animation Loop with requestAnimationFrame

document.addEventListener("DOMContentLoaded", () => {
  const box = document.createElement("div");
  box.style.width = "50px";
  box.style.height = "50px";
  box.style.backgroundColor = "#ef4444";
  box.style.position = "absolute";
  box.style.top = "100px";
  box.style.left = "0px";
  document.body.appendChild(box);

  let posX = 0;
  let animationFrameId = null;

  // Smooth Animation Loop
  function animate(timestamp) {
    posX += 2; // Move 2px per frame
    box.style.left = `${posX}px`;

    if (posX < 300) {
      // Schedule next frame
      animationFrameId = requestAnimationFrame(animate);
    } else {
      console.log("Animation Complete!");
      cancelAnimationFrame(animationFrameId);
    }
  }

  // Start Animation
  animationFrameId = requestAnimationFrame(animate);
});

Best Practices & Gotchas

• Never Use setInterval for Animations: setInterval fires regardless of browser layout state, causing dropped frames and high CPU usage.
• Use CSS transform and opacity: Animate CSS properties like transform: translateX() and opacity because they trigger fast GPU compositor threads without causing expensive DOM layout reflows.
• Cancel Animation Frames: Store the ID returned by requestAnimationFrame() and call cancelAnimationFrame(id) when unmounting or stopping animations.

Self-Check Challenge

Why does animating transform: translateX(100px) perform better than animating left: 100px?