Timing, Spacing and Easing

Give ten animators the same two drawings — a ball on the left, the same ball on the right — and ask them to fill the gap, and you will get ten different performances: a lazy drift, a snappy dart, a nervous twitch. The endpoints are identical; what differs is timing (how long the move takes) and spacing (how the in-between positions are distributed through that time). Timing and spacing are the animator's two great levers, and almost everything that reads as weight, energy or life lives in them.

This page pins down those two words precisely, connects them to the F-curve a modern tool actually stores, and shows why "easing" — the reshaping you met as smoothstep and its friends — is spacing, written as a function.

Timing vs spacing: two different knobs

Timing is the duration of an action — the number of frames between two extremes. Longer timing (more frames) reads as heavier or slower; shorter timing reads as lighter or snappier.
Spacing is how the in-between positions are distributed across those frames — the distance the object travels from one frame to the next. Even spacing reads as constant speed; spacing that bunches near the extremes reads as slowing down.

The two are independent. You can keep the timing fixed at, say, twelve frames and completely change the feel by re-spacing those twelve drawings — crowding them at the ends for a gentle slow-in / slow-out, or spreading them evenly for a mechanical glide. Conversely you can keep the spacing pattern and just stretch the timing to make the same move feel weightier. Spacing is where the acting is.

The spacing chart

Animators draw a spacing chart: a strip marking where each numbered drawing sits between the two extremes. Below, both moves take the same nine in-between frames (identical timing) between the same start and end. The top strip spaces them evenly — the ball crosses at a dead-constant speed, the robotic look. The bottom strip bunches the drawings toward each end and spreads them through the middle: the ball eases out of the start, sprints through the centre, and settles gently into the finish. Same endpoints, same frame count — utterly different life.

Notice that the bunched drawings near each end sit closer together — small spacing means the ball barely moves between those frames, which the eye reads as low speed. The wide gaps in the middle mean it covers a lot of ground per frame: high speed. Spacing is speed made visible.

Spacing is the slope of the F-curve

A keyframe tool doesn't store little dots; it stores a continuous F-curve — the value of the animated channel (here, position) as a function of time, x(t). The spacing between two nearby frames a time \Delta t apart is just how far x moved, x(t+\Delta t) - x(t). Divide by \Delta t and let it shrink and you get exactly the derivative:

\text{spacing per unit time} \;=\; \lim_{\Delta t \to 0}\frac{x(t+\Delta t) - x(t)}{\Delta t} \;=\; x'(t) \;=\; \text{velocity}.

The spacing of the in-betweens is the slope of the F-curve, which is the object's velocity. Flat regions of the curve (small slope) are bunched, slow frames; steep regions (large slope) are widely spaced, fast frames. "Slow-in / slow-out" is precisely an F-curve whose slope is near zero at the two keyframes.

This is why editing animation in a modern package is editing curves: dragging a keyframe's tangent handle steepens or flattens the slope there, which re-spaces the in-betweens, which changes the speed. The animator's spacing chart and the technical director's F-curve are the same object seen two ways.

Reading the curve interactively

Here are two F-curves over one move: the faint straight line is linear timing (constant slope → even spacing → constant speed), and the bold curve is ease-in-out (smoothstep 3t^2 - 2t^3), whose slope vanishes at both ends. Drag t and watch the moving marker: where the bold curve is flat (near the ends) the marker barely climbs between steps — tight spacing, low speed; through the steep middle it leaps — wide spacing, high speed. That shape is the slow-in / slow-out.

The straight line's slope never changes, so its spacing is uniform and its motion mechanical. The whole craft of spacing is choosing the shape of that climb.

Worked example: reading speed off spacing

Take a one-unit move eased by smoothstep s(t) = 3t^2 - 2t^3 over a 1-second, 24-frame shot, and compare two equal-length frame intervals — one at the start, one in the middle.

Frames 0→2 (t: 0 \to \tfrac{2}{24}): s(0) = 0 and s(\tfrac{1}{12}) = 3(\tfrac{1}{12})^2 - 2(\tfrac{1}{12})^3 \approx 0.0197. The ball moves about 0.020 units in those two frames.

Frames 11→13 (t: \tfrac{11}{24} \to \tfrac{13}{24}, straddling the midpoint): s(\tfrac{11}{24}) \approx 0.431 and s(\tfrac{13}{24}) \approx 0.569, a move of about 0.138 units — nearly seven times the spacing of the opening frames, for the very same two-frame interval. That 7× ratio is the slow-in made quantitative, and it matches the slope: s'(t) = 6t(1-t) gives s'(\tfrac{1}{24}) \approx 0.24 versus s'(\tfrac12) = 1.5.

A big reason is exaggerated spacing. A real dropped ball obeys gravity, so its F-curve is a parabola with a fixed spacing pattern. A cartoon animator is free to push the spacing further than physics allows — a few very widely-spaced frames on the way down (a blur of speed), then a hard squash, then wide spacing again on the way up. The extreme contrast between tightly- and widely-spaced frames is what makes cartoon motion pop. Modern tools even let you break the F-curve's smoothness on purpose — a sharp corner in the curve is a sudden change of speed, exactly the "snap" a stylised action wants.

A classic mistake when a shot "feels too slow" is to just scale the timing — stretch or squash the whole F-curve along the time axis. That changes the duration but preserves the spacing pattern exactly, so the motion keeps the same character, only faster or slower. If the problem is that the move reads as floaty or mechanical, no amount of retiming fixes it — floaty and mechanical are spacing faults (too-even spacing, or slopes that never settle to zero at the keys). Reach for the tangent handles, not the time scale. Conversely, if a move has lovely spacing but simply needs to be quicker, retime it and leave the spacing alone. Diagnosing which of the two knobs is wrong is half of animation editing.