UI animation earns its place when it answers a question the user would otherwise have to work out. Where did that panel come from? Did my action work? What changed on this page?
Motion that answers nothing is noise, however polished it looks.
Motion shows relationships#
When a card expands into a detail view, the movement tells people the two are the same object. When a menu slides from the edge, it tells them where to find it again. These spatial cues reduce the effort of understanding a change.
Questions to ask of every animation#
- What is this movement explaining?
- Would the change be confusing without it?
- Does it slow down a frequent action?
- Does it still make sense with motion turned off?
Choreograph, don't scatter#
One orchestrated transition reads better than many small effects firing at once. On this site, when you open a project the title arrives first and each block follows a fraction of a second later. The header and project index stay still, so the eye knows only the content has changed.
Easing carries the character#
Linear movement feels mechanical. Ease-out curves, which start fast and settle slowly, feel responsive because the motion begins the moment you act. Long, soft settles feel calm and editorial; short, snappy ones feel technical. Pick one character and use it consistently.
Respect the setting#
Some people get motion sickness or simply prefer stillness. Operating systems expose that choice, and the web can read it through the prefers-reduced-motion media query. When it is set, replace movement with simple fades or no transition at all.
Motion should make the interface easier to follow, never harder to use.
Start small#
If a product has no motion yet, begin with the moments that most often confuse people: opening and closing panels, switching views, confirming an action. Add a transition to each, test it with real users, and only then consider anything decorative. Most of the value sits in those few places.
