requestAnimationFrame

requestAnimationFrame (rAF) adalah cara yang benar untuk menjalankan animasi di JavaScript. Berbeda dari setTimeout atau setInterval, rAF di-sync dengan refresh rate browser.

Kenapa Bukan setTimeout?

// BURUK — tidak sync dengan browser, bisa miss frame
setInterval(() => {
  element.style.left = x++ + "px";
}, 16); // ~60fps, tapi tidak tepat

// BAIK — sync dengan browser rendering
function animate() {
  element.style.transform = `translateX(${x++}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Keuntungan rAF

• Sync dengan display refresh — Tepat 60fps (atau 120fps di high-refresh display)
• Pause otomatis — Berhenti saat tab tidak aktif (hemat CPU/battery)
• Batched updates — Semua rAF callback dijalankan sebelum repaint

Pattern: rAF dengan Timestamp

function animate(timestamp) {
  if (!start) start = timestamp;
  const elapsed = timestamp - start;

  // Progress: 0 → 1 dalam 1 detik
  const progress = Math.min(elapsed / 1000, 1);

  element.style.transform = `translateX(${progress * 300}px)`;

  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}

let start;
requestAnimationFrame(animate);

Cancel Animation

const id = requestAnimationFrame(animate);
cancelAnimationFrame(id); // stop animasi