Start from something finished

Badge, headline, copy and buttons arriving one after another. The stagger every landing page wants.

Three cards popping in on a spring, 100ms apart. A classic stagger, and it exports as one.

Columns rising in order, featured plan first. The stagger points at the plan you want picked.

Five logos fading up 70ms apart. The tightest stagger on this list, because social proof should read as one row, not a queue.

The quote lands first and the person follows. Attribution arriving second is the whole point — you read the claim, then who made it.

Three numbers rising together with almost no travel. Stats are read, not watched, so the motion gets out of the way fast.

The banner rises and the button pops a beat later. Two springs on purpose: the copy settles, then the thing you click arrives.

Slides in from the edge and overshoots a little. The spring settles in time, so the Motion export uses Motion's own spring.

Scale and fade from just under full size. The 0.96 start is the whole trick. At 0.8 it looks like a cartoon.

A bar dropping into place on scroll. Short travel and no bounce, because navigation shouldn't ask for attention.

Faces popping in one after another. 80ms apart — fast enough to read as one gesture, slow enough to count.

A menu opening, then its rows arriving 45ms apart. The list is the reason to look, so it moves after the box has stopped.

A panel sliding in from its own edge. It travels its full width, which is the one case where long travel is the honest choice.

The indicator travelling between fixed stops. Nothing fades — the only thing that moves is the thing that says where you are.

The answer fading up while the sign turns. Opacity and rotation rather than height, because height cannot be composited.

Rows arriving 60ms apart, each travelling a little less than the last. Five rows read as a list filling, not as five events.

A field shaking off bad input. Each shake is smaller than the last, because an even shake looks like a glitch.

The mark overshoots and the words do not. Confirmation earns one bounce; the sentence underneath it has no business bouncing.

A bar filling from its left edge. It slides inside a clipped track rather than scaling, so it grows from the edge instead of its middle.

Drops in and stops dead. The one entrance on this list with no spring at all, because a bouncing error reads as unserious.