Motion fundamentals

motion-fundamentals · by Paraplex

Timing, spacing and easing for interface and graphic motion: durations by size of change, staggers, holds, which curve arrives and which departs, springs and when not to. Load before animating anything.

Motion fundamentals

Motion tells the eye where to look and what just happened. Every move has a job — reveal, emphasize, connect, dismiss — and a move without one is noise. Before animating, say the job in a sentence; the timing and the curve follow from it.

The principles that carry over from animation

Of Disney's twelve, six matter for interfaces and graphics (Val Head, Designing Interface Animation; Rachel Nabors, Animation at Work):

• Timing and spacing — how long, and how the motion is distributed inside that time. Spacing is the curve; timing is the duration. Together they are almost everything.
• Anticipation — a small move opposite the main one just before it (a dip before a rise, a squeeze before a pop). Rarely more than 10% of the main move. It reads as intent; leave it out and things feel triggered rather than done.
• Follow-through and overshoot — a thing that stops dead is a machine. A little past the target and back (back-out, or a spring) is a body settling. Keep the overshoot small: a few percent of the distance for UI, more for playful pieces.
• Overlapping action — parts arrive at different times. A card's shadow, its text, its icon should not all land on one frame; offset them by 40–100 ms.
• Arcs — things in the world move in curves. A straight diagonal is the one path nothing real takes; bow it.
• Staging — one thing at a time. If two things move at once they must be one gesture (a group) or one must clearly lead.

Durations, by size of change

Material's motion system and Apple's HIG agree within a few frames:

Larger travel gets more time, but not proportionally — doubling the distance adds about a third to the duration, not double. Exits are faster than entrances (roughly 0.7×): things leaving have already been read.

Holds — how long a thing must stay

A title needs 1.5–2 s legible after its last letter lands, longer with more words (about 0.25 s per word beyond three). A stat or a number wants 1.5 s. A cut lands better on a hold than in the middle of a move. If the piece feels rushed it is almost always the holds, not the moves.

Staggers

A stagger turns a group into a sequence. 30–50 ms per item reads as one gesture with texture; 60–100 ms reads as a count; past 120 ms the items are separate events, and past six or eight items the total gets long — cap the total cascade near 600 ms by shrinking the step. Stagger from the side the eye enters (usually the left or the top); from the center for something that blooms; shuffled for texture, never for reading.

Which curve

• Arriving (entering, settling, appearing): ease-out. Fast start, soft landing. ease-out for the ordinary case; an exponential or quartic out (expo-out, quart-out in text; a brand's "expo" easing when it has one) for something crisp that lands hard and then whispers to rest.
• Departing (exiting, dismissing): ease-in. Slow start, fast leave — it gathers itself and goes.
• Moving through (from one resting place to another, both on screen): ease-in-out (ease or smooth).
• Linear: only for things that have no start or end on screen — a ticker, a scroll, a rotation that never stops — and for opacity under another curve.
• Springs (spring, spring-gentle, spring-bouncy, spring-wobbly): for things with mass that a hand could touch — a card, a pill, a toggle, a dragged object let go. Not for type, not for opacity, not for a camera. In Paraplex the segment between two keyframes is the spring's settling time, so give it room (0.6–1.0 s for snappy, more for bouncy).

Paraplex puts the ease on the arriving keyframe: the curve you set on a frame is how the motion arrives there.

What to avoid

• Everything moving. Choose the one thing, let the rest hold.
• Bounces on things that are not bouncy. Elastic on type looks broken.
• Long linear moves. They read as a machine.
• Symmetric in-and-out on entrances. An entrance is an arrival.
• Moves under 100 ms (they flash) and holds under a second (they were never read).

Paraplex recipes

A card entering (arrives on an out curve, its parts overlapping):

1. animate_layer ref "Card", preset "rise", duration 0.45, curve "expo-out".
2. animate_layer ref "Card title", preset "fade", duration 0.35, delay 0.08.
3. animate_layer ref "Card icon", preset "pop", duration 0.4, delay 0.14, curve "spring".

Three cards fanning in, one gesture with texture:

• animate_frames with two frames: at 0 s each card at opacity 0, position 0.3 below its rest, then at 0.5 s at rest with easing "ease-out" — and staggerSeconds 0.05 on both frames so the cascade totals 0.1 s.

A dismiss: the same layer, animate_layer direction "out", preset "slide-left" or "fade", duration 0.3 — faster than it came in.

A hover you want to feel physical: set_behavior with a hover state lifting the layer 0.05 and scaling 1.03 on a "spring-gentle" easing, 0.35 s.

A move between two resting places: add_keyframe at the start with the value it has, add_keyframe at the end with the new value and easing "ease" — never "ease-out" for a move that starts on screen.