A bench of instruments
Chapters open these instruments already set up for the lesson, and you can open any of them here. Each has a stage to watch and controls to change what you see; several also show the code.
Where an object sits on every frame: ghost copies along its path, beside an animator's tick chart.
Spacing = easing L2 Curve benchDrag a cubic-bezier curve's handles; position and velocity graphs side by side, and a second curve to compare.
Reading a curve as speed L3 Spring benchTune a spring by response and bounce, or stiffness, damping and mass. Live graph, settle time, CSS linear() to copy.
Physics as feel L4 Exposure sheetA timeline with one bar per element: shift a bar to offset it, or set a stagger to space many at once.
Choreography, overlap L5 Frame stepperPlay your code, or a page from this site, at 1×, 0.25× or 0.1×, or step it frame by frame.
Observation L6 Eye trainerPerception drills, scored, with a calibration graph of how close your guesses run.
Intuition, measured L7 Canvas sandboxA canvas you code live, animation loop already written, with dt (ms since the last frame) and fps readouts, pause and step.
Motion from scratch L8 Specimen journalSave any lab state with the words you would use for its feel. A vocabulary of your own.
Taste L9 Export deskAny lab state as CSS, Web Animations API, Motion (the library), GSAP or Canvas code.
Notation L10 Data stageA chart that transitions between states. Match bars by key or by position, stagger or stage the change; SVG or Canvas.
Motion that explains