Animations must earn their place
There are only three good reasons to animate something:
- Feedback – confirming that an action registered
- Orientation – showing where something came from or went
- Focus – drawing attention to a change the user would otherwise miss
If an animation does none of these, it is decoration. Decoration is fine on a landing page — in a tool people use daily, it is a tax they pay on every interaction. Sometimes the best animation is no animation.
Frequency
Think about what the user wants to achieve and how often they will see an animation. A hover effect is nice, but if used multiple times a day, it would likely benefit the most from having no animation at all.
A rule of thumb: the more often an action is performed, the less it should animate. Something seen once (onboarding, a success moment) can afford expressive motion. Something used dozens of times a day (switching tabs, expanding rows, a command palette) should be instant. And never animate in response to keyboard input — keyboard users are your fastest users, and any transition makes the UI feel like it is lagging behind them.
What not to animate
High-frequency, goal-oriented actions: tab switches, list navigation, autocomplete, frequently used panels. Text content the user is waiting to read — don’t fade in search results, they want the data, not a reveal. And consecutive identical elements: the first tooltip in a group may fade in after a delay, but moving to the next one should show it instantly.
What should be animated
Overlays entering and exiting (modals, popovers, toasts) — sudden appearance is jarring, and motion clarifies where the element came from. Elements appearing or disappearing inside a layout — without a collapse, content teleports and users lose their place. State changes on the same element, loading indicators, and changes that happen outside where the user is currently looking.
Instant
Animated (200ms)