Design
Motion Design Principles:
Animation That Earns Its Place
Motion in interface design has one job: reduce cognitive load by making state changes perceptible. Animation that draws attention to itself, rather than to the transition it represents, is noise wearing the costume of delight — and it accumulates into interfaces that feel exhausting to use.
The Purpose of Motion
Interfaces are fundamentally about state. A button is idle, then pressed, then triggering, then done. A list has items, then one disappears, then the rest fill the gap. State changes happen instantaneously from a technical standpoint, but the human visual system needs time to register them. Motion bridges that gap — it converts a binary state flip into a perceptible event with a beginning, middle, and end.
When motion serves this purpose, it is invisible in the best sense: the user perceives the interface state clearly without consciously noticing the animation. When motion fails this purpose — when it is decorative, slow, or arbitrary — it becomes a thing the user must wait through rather than a tool that helps them.
Duration: The Most Important Variable
Duration is the single most common failure mode in interface animation. Most UI animation should be faster than you think. The human visual system can process rapid changes; what it cannot do comfortably is wait. An animation that takes 500ms where 150ms would suffice creates an interface that feels slow — not polished, not premium, slow.
| Context | Duration | Rationale |
|---|---|---|
| Micro-interactions (hover, press) | 80–120ms | Must feel instantaneous; longer feels sluggish |
| State changes (toggle, select) | 120–200ms | Confirms action without perceptible delay |
| Component entrances (modal, drawer) | 200–300ms | Needs to feel intentional, not instant |
| Page transitions | 250–400ms | Long enough to prevent disorientation, short enough to not block |
Four Principles of Purposeful Motion
Continuity
Elements that share identity across states should animate with continuity — moving from their previous position to their new one, rather than fading out and fading in. Continuity tells the user that these are the same object in a new state, not two different objects.
Choreography
When multiple elements animate simultaneously, they should do so in a coordinated sequence that guides the eye in the right direction. Staggered entry animations should stagger along the reading direction. Exit animations should clear space before entrance animations fill it.
Easing
Linear motion feels mechanical and unnatural. Real-world objects accelerate and decelerate. Use ease-in for exits (object is gaining energy to leave), ease-out for entrances (object decelerates to rest), and ease-in-out for elements that move from one point to another without leaving the viewport.
Spatial Consistency
Motion should reinforce the spatial model of the interface. Elements that slide in from the right establish that "the next item is to the right." Modals that scale up from their trigger establish that the modal is an expansion of that element. Consistent spatial logic makes navigation feel learnable.
What to Avoid
- Bounce and spring effects on UI controls. Elastic bounce may feel playful in isolation, but it makes controls feel unreliable — the button is not where your finger left it. Reserve spring physics for gesture-based interfaces where direct manipulation is involved.
- Animating everything. Not every state change needs animation. Text that updates in a static context, numbers that increment in a counter, list items that are replaced — these can change instantly. Motion should be budgeted, not applied uniformly.
- Simultaneous complex animations. Multiple multi-property animations happening at once create visual chaos. If more than two or three things need to animate simultaneously, redesign the transition sequence so they proceed in a legible order.
- Ignoring reduced motion preferences. A significant percentage of users have vestibular disorders or motion sensitivities that make animation physically uncomfortable or nauseating. Respect
prefers-reduced-motionby either eliminating or drastically shortening animations.
Building a Motion System
Define motion tokens alongside your color and spacing tokens: a small set of named durations (fast: 120ms, base: 200ms, slow: 300ms), a small set of named easing curves (standard, enter, exit, expressive), and explicit rules for which token applies to which category of state change. A motion system doesn't constrain creativity — it creates predictable, coherent movement throughout the interface that users internalize as the product's feel.