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.

Animation Timing — intro with time-based loops is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

Delta time basics

Compute delta time each frame: (now − last) / 1000. This scales motion by real time.

// Time-based loop: compute delta time in seconds
let running = true;
let last = Date.now();

function loop() {
  if (!running) { return; }
  const now = Date.now();
  const dt = (now - last) / 1000; // seconds
  last = now;

  // Print a tiny delta preview
  console.log("dt", dt.toFixed(3), "s");

  requestFrame(loop);
}

// Start the loop and stop after a few frames
loop();
setTimeout(function () {
  running = false;
  console.log("stop");
}, 60);

Animation Timing — intro with time-based loops — illustration 3

Units per second

Use speed × dt to update position so motion stays consistent across frame rates.

// Move with a speed in units/second
let x = 0;               // position
const speed = 50;        // units per second

let lastT = Date.now();
let frames = 0;

function moveLoop() {
  const now = Date.now();
  const dt = (now - lastT) / 1000;
  lastT = now;

  // Distance = speed * time
  x = x + speed * dt;
  frames = frames + 1;

  console.log("x", Math.round(x));

  if (frames < 5) {
    requestFrame(moveLoop);
  } else {
    console.log("final x", Math.round(x));
  }
}

moveLoop();

Animation Timing — intro with time-based loops — illustration 4

Tiny easing demo

Easing shapes the curve. Here easeOutQuad starts fast and slows near the end.

// Ease from 0 to 1 over duration using easeOutQuad
function easeOutQuad(t) {
  // t in [0,1]
  return 1 - (1 - t) * (1 - t);
}

async function tween(durationMs) {
  let start = Date.now();
  let id = null;

  function step() {
    const now = Date.now();
    const t = Math.min(1, (now - start) / durationMs);
    const eased = easeOutQuad(t);
    console.log("eased", eased.toFixed(2));

    if (t < 1) {
      id = requestFrame(step);
    } else {
      cancelFrame(id);
      console.log("done");
    }
  }

  step();
}

tween(60);

Animation Timing — intro with time-based loops — illustration 5

Fixed-step taste

A fixed step can stabilize logic; the accumulator catches up if a frame is late.

// Fixed-step taste: step a physics tick and catch up using an accumulator
let acc = 0;                  // accumulated time
const step = 1 / 30;          // 30 FPS fixed step in seconds
let lastTime = Date.now();
let value = 0;
let fixedFrames = 0;

function fixedLoop() {
  const now = Date.now();
  const dt = (now - lastTime) / 1000;
  lastTime = now;
  acc = acc + dt;

  // Run zero or more fixed steps to catch up
  while (acc >= step) {
    // Update logic at a fixed rate
    value = value + 1;        // pretend physics
    acc = acc - step;
  }

  console.log("value", value);

  fixedFrames = fixedFrames + 1;
  if (fixedFrames < 5) {
    requestFrame(fixedLoop);
  } else {
    console.log("fixed stop");
  }
}

fixedLoop();

Animation Timing — intro with time-based loops — illustration 6

Delta vs fixed quiz

Quick check: Why delta time?

Animation Timing — intro with time-based loops — illustration 7

Recap

Recap: You simulated rAF with setTimeout, measured delta time, moved at units/second, added an ease-out, and saw a fixed-step taste with an accumulator.

Animation Timing — intro with time-based loops — illustration 8

Frequently asked questions

Is the “Animation Timing — intro with time-based loops” lesson free?

Yes — the full text of “Animation Timing — intro with time-based loops” is free to read here on the web, and the JavaScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Animation Timing — intro with time-based loops”?

Build a tiny animation loop, use time-based (delta) updates, simulate requestAnimationFrame, and add a simple easing. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Animation Timing — intro with time-based loops” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

setTimeout, setInterval, and timer drift
Debounce vs Throttle — hand-rolled
Animation Timing — intro with time-based loops

← Back to JavaScript Academy