There are two kinds of animation in interfaces. One kind quietly answers questions — where did this panel come from, did my tap register, what just updated? The other kind performs. Users feel the difference immediately, even if they can't name it.
Motion as explanation
The best interface animation is barely noticed because it's doing logistics. A drawer sliding in from the right teaches you where to close it. A card expanding from where you clicked preserves your sense of place. A subtle shake on a wrong password says "try again" faster than text can.
The three jobs worth animating
- Orientation — showing where things come from and go, so navigation feels spatial instead of teleporting
- Feedback — confirming that a press, save, or send actually happened
- Continuity — smoothing state changes so content doesn't jarringly pop in and out
If a motion does none of these jobs, it's decoration. Decoration is fine on a marketing splash; inside a tool people use daily, it becomes friction by week two.
The rules that keep motion honest
Keep interface transitions between 150 and 300 milliseconds — long enough to read, short enough to never wait for. Ease out on entrances, ease in on exits.
Respect reduced motion
Some users get genuinely ill from parallax and large sweeping transitions. Honor the prefers-reduced-motion setting by replacing movement with simple fades. It's a few lines of CSS, and it's the difference between a polished product and one that literally makes people dizzy.