Resources · 3-minute read

A small vocabulary for motion

Five interaction patterns to sketch before adding animation to an interface.

Keep the vocabulary small

A product feels coherent when the same kind of change moves in the same way. Begin with selection, disclosure, submission, reordering and dismissal. Each pattern needs a clear static state before it needs a transition.

Selection and disclosure

Move a shared indicator between selected items; retain the selected label and contrast. Expand supporting content from its trigger, but ensure it is keyboard reachable and that the trigger exposes its expanded state.

Submission and dismissal

Keep the action in place while a request is pending. Announce success or failure as text, and provide a recovery action. When dismissing a dialog, return focus to its opener so keyboard users can continue.

Take it with you

Motion pattern worksheet

A working starting point. Adapt it to your project.

MOTION PATTERN WORKSHEET

For each pattern (selection, disclosure, submission, reordering, dismissal), record:

Trigger:
Previous state:
New state:
What the movement explains:
Duration to try:
Keyboard behavior:
Focus destination:
Screen-reader announcement if needed:
Reduced-motion state:
Failure or interruption behavior:

Test each pattern with animation disabled. The meaning must remain clear.

Download .txt ↓

A small vocabulary for motion

Keep the vocabulary small

Selection and disclosure

Submission and dismissal

Keep exploring.

Let’s BuildWhat’s Next.

Start a conversation.

Signal received.

Keep the vocabulary small

Selection and disclosure

Submission and dismissal

Keep exploring.

Making websites feel alive

The product-to-creative prompt

A better lead handoff

Let’s BuildWhat’s Next.

Start a conversation.

Signal received.