Timing answers when something happens. Spacing answers where the object clusters between those moments.

Timing versus spacing comparison Two markers move over equal duration. One uses even spacing while the other changes clustering along the path. EVEN UNEVEN

TIMING 000% | EVEN 000% | UNEVEN 000% | SPACING EASE IN + OUT

Type
Toy note
Status
Active toy note
Published
April 22, 2026
Canonical URL
https://shanecurry.com/lab/toys/timing-vs-spacing/
Related project
ChewGum Animation
Scope
Animation fundamentals, visible motion comparison

Two markers travel the same distance in the same duration, but one keeps even spacing while the other bunches near the start or end.

Timing and spacing are easy to blur in prose. Side-by-side playback makes the distinction visible: equal duration can still read differently when positions cluster differently.

Timing
The duration and placement of events in time.
Spacing
The distribution of positions between those events.
Even spacing
Equal position intervals across the path.
Variable spacing
Position intervals that cluster or stretch while the duration stays fixed.
Track length
252 px (startX 112, endX 364)
Sample ghosts per track
9
Animation duration
2400 ms per play cycle
Even-track Y
34 px
Eased-track Y
94 px
Easing options
Ease In, Ease Out, Ease In + Out (quadratic)

Each easing function maps a linear timing input t in [0, 1] to an eased output that determines spacing along the path.

Ease In
t² — quadratic acceleration; the eased track starts slow and ends fast.
Ease Out
1 − (1 − t)² — quadratic deceleration; the eased track starts fast and ends slow.
Ease In + Out
t < 0.5 ? 2t² : 1 − (−2t + 2)² / 2 — piecewise quadratic; slow at both ends, fast in the middle.

These are quadratic easings (degree 2). Cross-link: see also the cubic easings used in the Anticipation Before Action toy.

  • Timing is one of the Twelve Principles of Animation described by Frank Thomas and Ollie Johnston in The Illusion of Life; spacing is the visible distribution of positions that makes timing readable.
  • Cross-link: the Anticipation Before Action toy isolates a complementary axis of motion readability — the setup beat before the payoff.
  • Glossary cross-references: timing, spacing, ease in, ease out, ease in + out.
  • Implementation note: this toy is implemented inline on this page with SVG markers, a timeline slider, and quadratic easing functions. No separate public repo exists yet.

ChewGum Animation

Shane Curry, "Timing vs. Spacing," https://shanecurry.com/lab/toys/timing-vs-spacing/, published April 22, 2026.

Two motions can finish together and still read differently. The difference is in how their positions distribute between start and finish.