Building UI motion that helps, not distracts

Motion is useful when it improves understanding.

In product surfaces, animation should communicate one of three things:

1. State transition
2. Hierarchy change
3. User feedback

Anything else is decoration, and decoration is where performance and accessibility debt usually starts.

The guardrails I use

• Keep durations short for frequent interactions.
• Animate composite-friendly properties first (transform, opacity).
• Avoid animation on core content areas during initial load.
• Respect reduced-motion preferences by default.

A team rule that scales

Before adding an animation, write one sentence describing what user confusion it resolves. If that sentence is weak, the animation is usually unnecessary.

That single rule has helped us keep interfaces calmer and faster while still feeling polished.