How Animation Adds Friction
Animation adds perceived time to every interaction it's attached to. A 300ms fade on a modal is pleasant when you're opening it for the first time. It's annoying when you're opening and closing it twenty times in a work session. The user's perception of an application's responsiveness is shaped by the sum of every animation they wait through.
The most damaging pattern: animating things that appear in response to explicit user actions. Clicking a tab and waiting 400ms for the content to fade in is not delight — it's latency. The content should be there immediately. Reserve animation for contextual transitions, not actions.
The Hierarchy of Where Animation Belongs
Animation adds value when it communicates meaning: a loading state that reassures the user something is happening, a toast notification that draws attention without blocking, a page transition that preserves spatial context between routes. These animations reduce cognitive load even as they add time.
Animation hurts UX when it delays task completion. Modal opens, tab changes, dropdown reveals, form submissions — these should respond immediately. Add motion only if it helps the user understand what's happening, not as decoration.
Key takeaways
- Animate context, not actions — page transitions and element reveals add spatial context; button clicks and form submissions should respond immediately
- Respect prefers-reduced-motion — users who've indicated sensitivity to motion deserve a non-animated experience, and Next.js makes it easy to detect this preference
- If an animation feels good the first time but annoying the tenth time, it should be shorter or removed — power users interact with UI at a different rhythm than first-time visitors
Conclusion
The discipline with animation is subtraction, not addition. Every animation in your UI should earn its place by reducing confusion or communicating state — not by existing because it's technically possible.
Enjoyed this article?
Vivek Kumar Singh
Technical Expert · Full Stack Cloud Engineer · Tokyo, Japan
