01 / THE RACE
MAKE TIMING VISIBLE
Same move.
A different feeling.
Two characters travel the same distance in the same time. Only the timing curve differs. Shape the curve, watch the frames bunch up or spread out, and feel what changes.
START WITH A QUESTIONPick one · watch both actors · then change it
TIME0 msFrame 1 of 13
POSITION0%of the way from A to B
SPEED NOW0.0×× the average speed
PEAK SPEED1.5×at 50% of the time
START → END SPEED0 → 0Eases in and out
BIGGEST STEP12%of the distance in one frame
More settings
Frames per second
Fewer frames make spacing easier to see. The curve is the same at any rate.
Exact handle valuestime, position
Times stay between 0 and 1; positions may go past A or B.
02 / THE TIMING GRAPH
Read the curve.
CSS
cubic-bezier(0.25, 0.1, 0.25, 1)Steeper = faster. Flat = holding still. Drag the graph to scrub through time.
WHAT’S HAPPENING
Read the motion.
TRY THIS
Three timing briefs.
How the model works
Every curve maps a time fraction t (0 at the start, 1 at the end) to a position fraction (0 = A, 1 = B). The formulas come straight from this lab’s model: linear t; ease in-out (smoothstep) 3t² − 2t³; wind-up (“back-in”) (c+1)t³ − c·t²; overshoot (“back-out”) 1 + (c+1)(t−1)³ + c(t−1)², where c is the strength slider.
CSS ease and Custom are cubic Bézier curves, exactly as in CSS cubic-bezier(x1, y1, x2, y2). The curve’s x is time, so to find the position at a given time the model first solves for the curve parameter whose x equals that time (by halving the interval 40 times), then reads its y. CSS ease is cubic-bezier(0.25, 0.1, 0.25, 1).
Bounce is added here: a drop under constant gravity where each hit keeps a fraction e of the speed. Each rebound reaches e² of the last height and lasts e times as long. Choosing the fall time (1−e)/(1+e) of the whole duration makes the endless series of bounces add up to exactly 1, so it comes to rest right at the end.
Speed is the slope of the curve, measured in multiples of the average speed (distance ÷ duration), so linear is always 1×. The frames are the curve sampled at fps × duration evenly spaced times; the ghosts and the spacing chart are those samples.
Squash and stretch is a drawing rule, not physics: the character stretches along its path by up to the slider value at 3× average speed, and squashes at a bounce in proportion to the impact speed. Width is set to 1 ÷ length so the area never changes.
Honest limits
- These are timing curves, not a physics simulation. Nothing here has mass; “heavy” and “springy” are how the curves read to people, apart from the bounce, which follows ideal gravity with no air drag and instant contacts.
- The duration guidance is a rule of thumb from design guides, not a measured result. The right length depends on how far things move, how big they are, and how often people see them.
- Squash and stretch uses a simple speed rule. Real animators shape it by hand, frame by frame, and often add smear frames or motion blur.
- Your screen may not show every frame at 60 fps while the page is busy. The ghosts and numbers are computed from the curve, so they are exact even if playback stutters.
- Each loop holds on the final pose for a moment before replaying, so you can see where it settled. The hold is not part of the timing.
- The original lab’s model also has a time-based squash pattern and a 1–8 second duration range for a 3D scene. This page uses the model’s curve formulas with its own duration range (0.1–3 s) so interface timings can be tried.
Sources & further reading
The model notes are in RESEARCH.md. Related labs: Cloth & Soft Bodies and Wave Studio.