The Editor and the Motion Timeline

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Motion Timeline

The panel under every live example on this course: it pauses, slows, steps and scrubs the page, and shows each animation as a track.

track

One row on the timeline: one animation, with when it starts, how long it lasts and what it changes.

keyframe

A value an animation must pass through at a certain point, for example "at 40%, scale 1.5". The browser works out the frames between keyframes.

scrub

To drag through time to a chosen moment, like dragging the playhead of a video.

60 Hz

A screen that shows 60 frames a second: one frame every 16.7 milliseconds. Many phones and laptops are 90 or 120 Hz.

cost colour

The green, amber or red mark on a track: whether animating that property makes the browser only composite, also repaint, or also lay out the page.

1. 1

   Count the frames of a 600 ms move

   In "Your first look at the timeline", press Pause, then Move the bike, then press Step until the bike stops moving. At 60 frames a second, 600 ms is 36 frames: watch the frame counter (F 0036 more than where you started) when it arrives. On a 120 Hz screen the same move has 72 frames, each one smaller. Phase 1 explains why the time stays the same.

2. 2

   Change the duration and see the track change

   In the CSS tab change transition: transform 600ms ease-in-out; to 1500ms. After the page runs again, press Move the bike: the track now says 1500 ms in its details. The bar on the ruler is longer too, but not exactly two and a half times: the ruler rescales itself (its end moves out, and its tick labels change) so the whole animation fits.

3. 3

   Spot the layout cost

   In "Two ways to grow a bar", look at the timeline before you press anything: it says nothing is moving yet (an empty timeline is normal until something animates). Now press the button. Two tracks appear: transition · width with a red mark, and transition · transform with a green one, plus a costs layout badge. They look the same on a fast computer. On a cheap phone the red one is the one that stutters, because the browser must lay out the page 60 times a second.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: when an animation looks wrong you usually cannot say why, because it is over before you can look. Is it too slow at the start? Does it jump at the end? Is the browser struggling? You need to stop time, step through it and see the numbers.

2. 2

   The editor and the viewfinder. Edit the code (HTML, CSS, JavaScript tabs) and the page runs again by itself after a short pause, or press Run (Ctrl+Enter). The page appears in the viewfinder, with LIVE or PAUSED in its corner. Reset puts the example back as it was. Your edits are kept in this browser, so you can leave and come back.

3. 3

   The transport. Replay runs the page again from the start. Pause freezes everything that moves on the page: CSS animations and transitions, JavaScript loops, timers, and library animations from GSAP or Motion. Step moves time forward by one frame (16.7 ms, one frame on a 60 Hz screen). The speed buttons 0.1×, 0.25×, 0.5×, 1× slow the whole page down. The time shows as minutes:seconds.milliseconds, with the frame number next to it.

4. 4

   Tracks. Each animation on the page becomes a row. The label says which element and what kind (transition, @keyframes, WAAPI, GSAP), then what it changes: the CSS property for a transition or a WAAPI animation (transition · transform, WAAPI · background-color), the animation's name for a CSS keyframe animation (@keyframes · spin). The bar shows when it starts, how long it lasts (a hatched part is its delay), and small diamonds mark its keyframes (the values it passes through). An infinite animation runs off the end with ∞, and an animation that has ended stays as a dimmed bar. With nothing moving yet, the timeline says so instead of showing an empty ruler. Click a track to see its details (including its easing; for a CSS keyframe animation that is the easing between keyframes) and a graph of the value over time.

5. 5

   Cost colours. The coloured mark at the start of a row says how much work the animation costs the browser each frame: green for composite only (it moves or blends pixels it already has: transform and opacity, and, measured in headless Chromium, also background-color and clip-path), amber for paint (it draws pixels again: text colour, borders, shadows), red for layout (it works out sizes and positions again: width, top). A costs layout badge appears when any track is red. Phase 6 explains and measures all three.

6. 6

   Scrubbing, reduced motion and frames. Drag along the ruler to jump to a moment; dragging backwards runs the page again, frozen, and steps to that time. The ruler also works from the keyboard: focus it, then Left and Right arrows move one frame (with Shift, 100 ms) and Space pauses or plays. The Reduced motion switch runs the page as someone whose system asks for less motion. The strip at the bottom shows how long each recent frame took: green bars are on time, amber and red ones were late.

• You can pause, slow down, step and scrub a live example

• You can read a track: kind, element, property, duration, delay, keyframes

• You can say what each cost colour means

• You can run an example as a reduced-motion user