0Pricing
JavaScript Academy · Lesson

Animation Timing — intro with time-based loops

Build a tiny animation loop, use time-based (delta) updates, simulate requestAnimationFrame, and add a simple easing.

Why time-based animation?

Goal: Drive smooth motion with time-based updates.

  • Simulate requestAnimationFrame
  • Measure delta time
  • Move at units/second
  • Add a tiny easing
Animation Timing — intro with time-based loops — illustration 1

Simulated rAF

No DOM here, so we simulate requestAnimationFrame using setTimeout at about 16ms.

// requestFrame: simulate ~60 FPS with setTimeout
function requestFrame(fn) {
  // ~16ms between frames for ~60fps
  return setTimeout(function () { fn(Date.now()); }, 16);
}

function cancelFrame(id) {
  clearTimeout(id);
}

// Tiny demo: schedule one frame
requestFrame(function (ts) {
  console.log("frame at", ts);
});
Animation Timing — intro with time-based loops — illustration 2

All lessons in this course

  1. setTimeout, setInterval, and timer drift
  2. Debounce vs Throttle — hand-rolled
  3. Animation Timing — intro with time-based loops
← Back to JavaScript Academy