Animation is a claim on attention
Every animation interrupts something: the eye tracks movement whether the viewer wants to or not. That makes motion the most expensive tool in the design kit — used well it explains, used loosely it exhausts. The first question is never “how should this animate?” but “should this animate at all?”
The purposes that justify motion
An animation earns its place by doing one of a few jobs:
- Feedback — confirming the interface registered a press or a drop
- Spatial continuity — showing where a panel came from, so its appearance isn’t a teleport
- State change — making a toggle, an expansion, a reorder legible
- Bridging — smoothing a content change that would otherwise jump
- Delight — celebration and personality, rationed for rare moments
If none of those names fits, the animation is decoration on borrowed attention. “It looks nice” is a reason to hesitate, not to ship.
Both versions animate. Only one tells you where the panel came from.
Maya commented on your file
Ben shared a project
Frequency sets the budget
How often a user triggers something decides how much motion it can afford. Actions fired dozens or hundreds of times a day — keyboard shortcuts, tab switches, a command palette — deserve almost no animation: at that frequency, even 200ms becomes friction the user pays on every use. Occasional events — modals, drawers, toasts — carry standard, quick motion comfortably. Rare moments — onboarding, a first success, a completed milestone — are where generous, playful animation belongs.
The rule inverts the beginner instinct. The most-used parts of an interface should move the least.
Open each palette a few times. Watch what frequency does to a “nice” animation.
0ms0msFunction outranks flair
Content the user is actively reading or acting on should not move for style. A chart mid-analysis, a form mid-entry, a list mid-scan — motion there breaks the very task the screen exists for. Decorative movement belongs on marketing surfaces, empty states and moments between tasks, never on the data itself.
The takeaway
Motion is a budget spent from the user’s attention. Demand a named purpose — feedback, spatial continuity, state change, bridging, or rationed delight — and scale the allowance by frequency: the more often something happens, the less it should move. When no purpose fits, the best animation is none.