Track A

Animation, under the hood

What actually happens when something moves on screen: the frame loop, how the browser interpolates, the compositor thread, easing, the Web Animations API, and FLIP.

1. The frame: what 60fps actually asks of the browser

   On screen, smoothness is not a feeling — it is a deadline the browser has to hit sixty times a second. This lesson takes apart a single frame — where your JavaScript runs inside it, how much of the 16.6ms is actually yours, why requestAnimationFrame is the only correct place to drive an animation, and what physically happens on screen when you miss the deadline.

   13 min
2. Transitions vs keyframe animations: how the browser interpolates

   A CSS transition or animation is a promise, not a program — you name a start and an end, and the browser fills in every frame in between by blending the two, which is exactly the kind of per-frame work the previous lesson said you don't want to be doing from JavaScript yourself.

   13 min
3. Easing: cubic-bézier, steps, and the shape of time

   Easing has nothing to do with decoration — it's a pure function that remaps time itself, and once you see a timing function as "progress = f(t)" rather than a vague vibe like "ease-out," every named curve, every bounce, and every sprite-sheet animation becomes something you can derive instead of look up.

   13 min
4. The compositor thread: animating without the main thread

   The browser runs a second thread whose only job is to assemble already-painted layers into a frame, and when an animation touches only transform or opacity, the browser can hand the entire thing to that thread — which is the real, mechanical reason it keeps running smoothly even while your JavaScript is busy blocking everything else.

   13 min
5. The Web Animations API: the engine your CSS compiles to

   CSS transitions, CSS keyframe animations, and JavaScript's element.animate() look like three unrelated features, but they are three front-ends to the same underlying timing model — and once you see that model directly, through the Animation objects it actually produces, you get real controls over motion that CSS syntax alone was never designed to expose.

   12 min
6. Interruptible, reversible, composable animations

   A real animation almost never gets to finish uninterrupted — the user hovers away, clicks the other tab, drags the panel back — and treating an animation as a value that plays once from start to end, instead of as live state you can query and redirect, is what produces the visible jump when it gets cut off mid-flight.

   13 min
7. FLIP: animating layout changes without paying for layout

   You often want to animate a layout change — a card growing, a list item reordering, an element jumping to a new parent — and the trick that makes it cheap is to let layout happen instantly, once, and then fake the entire visual transition with a single compositor-friendly transform.

   14 min
8. Measuring animation: jank, dropped frames, and the tools

   Every mechanism this module has described — the 16ms budget, the compositor thread, FLIP — is only useful once you can actually observe a frame being produced or dropped and attribute the drop to its real cause, which is what the DevTools Performance panel, the Rendering panel, and a handful of performance APIs are for.

   13 min