CSS transitions and keyframe animations are excellent for declarative, predictable motion, but some animations need to be computed frame by frame — physics, collisions, values that depend on user input, or drawing on a canvas. That is where requestAnimationFrame (often shortened to rAF) comes in. It asks the browser to call a function just before the next repaint, so your updates land in step with the browser's own rendering cycle instead of fighting it.
The core pattern is simple and worth memorizing: write a function that updates state and applies it to the DOM or canvas, then call requestAnimationFrame again from inside that function to schedule the next frame. The callback receives a high-resolution timestamp, which you use to compute elapsed time (delta time) so motion stays consistent regardless of the device's frame rate. Saving the ID returned by requestAnimationFrame lets you stop the loop later with cancelAnimationFrame — a detail many beginners skip and then wonder why animations keep running in the background.
As you watch these videos, pay attention to four things: where the loop re-schedules itself, how time is handled, which properties are being changed each frame, and how the speaker contrasts rAF with setInterval or setTimeout. The timer-based approach can drift, fire while the tab is hidden, and produce frames the browser never paints; rAF avoids all three. Try pausing each video and rebuilding the loop yourself before watching the finished result.
A focused walkthrough of animation fundamentals applied in plain JavaScript, using requestAnimationFrame to drive the motion of an example element. Expect to see the basic loop structure — an update function that recalculates position and then re-schedules itself for the next frame — along with how the changing values are written back to the page each tick.
This is the most direct match for the core subtopics: what requestAnimationFrame is and how to build and run a basic animation loop, demonstrated at a pace short enough to follow along in your own editor.
Built around a frames-per-second display template, this video makes frame timing visible and then compares requestAnimationFrame with setInterval head to head. Because it measures FPS on screen, it naturally touches on the timestamp and elapsed-time calculations that underlie smooth, frame-rate-independent motion.
It addresses the performance-advantages and synchronization subtopics explicitly, and seeing an actual FPS counter react to each technique is far more convincing than reading a description of the difference.
From The Coding Train, this p5.js tutorial introduces variables alongside the setup() and draw() functions, using mouseX and mouseY as live, changing values. The draw() function is p5's wrapper around a requestAnimationFrame loop, so this is a gentle look at the same idea: state that changes every frame and is redrawn to a canvas.
It is a clear, well-produced introduction to the mental model of a per-frame draw loop and canvas updates, which helps before you write the raw requestAnimationFrame version yourself — just remember p5 is hiding the rAF call for you.
Together these videos target MO3 most directly: the first demonstrates constructing a requestAnimationFrame loop and updating element properties each frame, the second surfaces timestamp and frame-rate reasoning through an on-screen FPS counter, and the third builds intuition for per-frame canvas drawing and changing state. The rAF-versus-setInterval comparison supports MO1 and MO5 by showing concretely why a rendering-synchronized loop produces smoother results than timer-based animation, and it provides a frame-rate reference point you will use again in MO4 when profiling animations in Chrome DevTools. Note that cancelAnimationFrame and loop cancellation are only lightly implied here, so plan to practice stopping and restarting a loop in the module exercises.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.