Art, design & a little curiosity
Motion & animation ↗

Animation timing and spacing with one moving dot

Separate the duration of an action from the distance traveled between its visible positions, using a simple movement study that makes acceleration easy to inspect.

A watercolor-style sequence of a moth unfolding its wings.
Watercolor sequence / Imagined editorial illustration

Positions reveal the pace

Timing describes when events happen; spacing describes where an object is at those moments. A dot can take the same second to cross a canvas while feeling steady, cautious, or abrupt. The difference appears in the arrangement of its intermediate positions.

Place twelve samples along one path

Mark a start and end position. Draw twelve evenly timed samples between them, first with equal spatial gaps and then with gaps that gradually increase. Play the sequences at the same duration. Use a contact sheet to see the spacing pattern without relying only on playback.

Keep a visible note of total travel duration while assembling the first version. Keep the ordinary state beside the most extreme intended state. The useful boundary is where the relationship remains understandable, rather than where the tool stops allowing a larger value. Check both ends before filling the middle. A useful acceptance check is whether the intended acceleration survives while the action stays readable. Judge that at the intended viewing size or working distance, where tiny construction mistakes and exaggerated effects can have very different consequences.

Locate the gap that changes the pace

An action that looks too slow may have crowded spacing near its beginning rather than an excessively long duration. An action that looks jerky may contain one isolated large gap. Locate the specific region before shortening the whole shot.

Check one local instance of total travel duration before assuming that the whole composition needs a different approach. Review the movement as a strip of still moments as well as in playback. Inspect the pose immediately before and after a confusing event.

Animate confidence and reluctance

Make a dot cross a doorway as though it is confident, then as though it is reluctant. Keep the path and total duration fixed. Place a pause or acceleration deliberately rather than changing every aspect of the motion.

Test a compact set of alternatives: 0.5, 1, and 2 seconds. Give each trial the same amount of finishing work so polish does not bias the comparison. Review them once as complete pieces and once while concentrating on the changing feature. If your preference reverses, note which artistic goal each version serves more effectively.

Draw a spacing chart beside the timeline

For the falling seed, place small numbered dots at equal time intervals along the planned path. Their gaps should grow during the fall if that is the intended acceleration. Mark the landing separately so the final gap does not leap through the platform. A spacing chart lets you alter one region of the action without changing the whole duration, and gives a concrete reference when adding the visible seed.

A worked example

A seed falling onto a platform

Animate a seed dropping from a shelf and landing on a small platform. Use wider gaps as it falls and a brief held position at contact. The same abstract circle can suggest weight when its spacing follows a clear sequence of events.

References & further reading

Examples and exercises in this guide are original teaching scenarios.

Keep following the thread.

More motion & animation ↗