Animation in user interfaces serves four purposes and only four: guiding attention to important changes, providing feedback that an action was received, communicating relationships between elements, and creating continuity during state transitions. If an animation does not serve one of these purposes, it is decoration — and decoration that moves is a distraction.
The best UI animations are invisible. Users do not notice them consciously; they simply feel that the interface is responsive, clear, and pleasant to use. A button that subtly scales on press confirms the tap was registered. A page transition that slides content in the direction of navigation maintains spatial orientation. A skeleton loader that pulses communicates progress without requiring a spinner.
This guide covers the principles, techniques, and implementation patterns for building animations that enhance user experience while maintaining performance and accessibility.
Framer Motion provides the best developer experience for React animations. These patterns cover the most common UI animation needs.The goal of UI animation is not to impress — it is to communicate. Every millisecond of motion should make the interface clearer, faster-feeling, or more intuitive. When animation serves the user, interfaces feel alive and responsive. When animation serves the designer, interfaces feel slow and overwhelming.
Start with no animation and add motion only where it solves a specific UX problem. A button that does not communicate press feedback? Add a 150ms scale animation. A page transition that disorients users? Add a 300ms directional slide. A loading state that feels frozen? Add a skeleton screen with a subtle pulse. Build your motion vocabulary one purposeful animation at a time, and your interfaces will feel professional without feeling performative.
UI animation best practices require every animation to serve a purpose (guiding attention, providing feedback, communicating state, or creating continuity). Micro-interactions should be 100-200ms, page transitions 200-500ms, and only transform and opacity properties should be animated to maintain 60fps. Always respect prefers-reduced-motion for the approximately 25% of users who experience motion sensitivity.
Key Takeaways
- Every animation should have a purpose — guiding attention, providing feedback, communicating state, or creating continuity; if an animation does not serve one of these functions, remove it
- Duration matters enormously: micro-interactions should be 100-200ms, page transitions 200-500ms, and complex orchestrations up to 700ms — slower feels sluggish, faster feels jarring
- Only animate transform and opacity properties on the main thread — animating layout properties (width, height, top, left, margin) triggers expensive reflows that cause visible jank
- Framer Motion (React) and GSAP provide the best developer experience for complex animations, while CSS transitions handle simple hover and state changes perfectly
- Always respect prefers-reduced-motion — approximately 25% of users experience discomfort from motion, and ignoring this preference is both an accessibility failure and a legal risk
Frequently Asked Questions
Key Terms
- Micro-Interaction
- A small, focused animation that provides feedback for a single user action — a button press ripple, a toggle switch animation, or a form validation indicator — lasting 100-300ms and communicating the result of the interaction.
- Easing Function
- A mathematical curve that controls the rate of change during an animation, determining whether motion accelerates, decelerates, or follows a custom path — critical for making animations feel natural rather than robotic.
Is your product facing adoption or retention problems?
Design system debt and inconsistent UX patterns show up in support tickets, conversion drop-off and onboarding abandonment. We are happy to look at what you have and share what we see.
Show Us What You Have BuiltSummary
UI animation is the difference between an interface that feels mechanical and one that feels alive. Well-designed motion guides user attention, provides instant feedback, communicates state changes, and creates the perception of speed even when operations take time. This guide covers the motion design principles that separate good animation from gratuitous animation, practical CSS and Framer Motion implementation techniques, performance optimization to maintain 60fps, and accessibility requirements for users who experience motion sensitivity.