JavaScript Academy · Lesson

Animation with requestAnimationFrame

Create smooth canvas animations.

Animation with requestAnimationFrame is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why requestAnimationFrame?

requestAnimationFrame(callback) schedules your draw function to run before the next screen repaint — typically 60 times per second. It pauses in background tabs, saving CPU and battery, unlike setInterval.

function frame() {
  // draw one frame
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

The Basic Loop

An animation loop clears the canvas, updates state, draws, then re-schedules itself.

let x = 0;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  x += 2;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Clearing Each Frame

Without clearRect the previous frame stays painted and you get trails. Clear the whole buffer at the top of every frame for a clean redraw.

ctx.clearRect(0, 0, canvas.width, canvas.height);

The Timestamp Argument

The callback receives a high-resolution timestamp (milliseconds). Use it to compute elapsed time between frames.

let last = 0;
function loop(now) {
  const dt = now - last;
  last = now;
  // dt = ms since previous frame
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Frame-Rate Independent Motion

Multiply velocity by delta time so movement speed is consistent regardless of frame rate.

let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
  const dt = now - (loop.last || now);
  loop.last = now;
  x += speed * dt;
  requestAnimationFrame(loop);
}

Bouncing a Ball

Reverse velocity when the object hits an edge to make it bounce.

let x = 50, vx = 3;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  if (x < 0 || x > canvas.width) vx = -vx;
  ctx.beginPath();
  ctx.arc(x, 75, 15, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(loop);
}
loop();

Stopping the Loop

requestAnimationFrame returns an id. Pass it to cancelAnimationFrame to stop animating.

let id;
function loop() {
  id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);

Pausing and Resuming

Track a running flag. To resume, request a new frame; to pause, simply stop requesting (or cancel the pending one).

let running = true;
function loop() {
  if (!running) return;
  // draw...
  requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }

Animating Multiple Objects

Store objects in an array and update each one inside the loop.

const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of balls) {
    b.x += b.vx;
    ctx.fillRect(b.x, 60, 20, 20);
  }
  requestAnimationFrame(loop);
}
loop();

Easing for Smooth Motion

Interpolate toward a target with easing for natural deceleration.

let x = 0;
const target = 200;
function loop() {
  x += (target - x) * 0.1; // ease out
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();

Performance Tips

Avoid allocating objects inside the loop, batch draw calls, and only redraw what changed when possible. Keep per-frame work small to stay under the ~16ms budget for 60fps.

Quick Check

Test your animation knowledge.

Recap: Animation

You built animation loops with requestAnimationFrame, cleared each frame with clearRect, used the timestamp for frame-rate independence, animated bouncing balls and multiple objects, applied easing, and learned to stop/pause with cancelAnimationFrame.

Frequently asked questions

Is the “Animation with requestAnimationFrame” lesson free?

Yes — the full text of “Animation with requestAnimationFrame” is free to read here on the web, and the JavaScript Academy course includes 4 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 with requestAnimationFrame”?

Create smooth canvas animations. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Animation with requestAnimationFrame” 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

← Back to JavaScript Academy