Five tips for creating great UI animations
Great UI animations have a clear purpose, such as feedback, orientation or focus; they are quick, usually between 100 and 400 milliseconds; they use natural easing; they follow consistent rules across the product; and they respect users’ reduced-motion settings. Animation should support the task, never delay it.
Why UI animation matters
Animation in user interfaces is not decoration. When it is done well, it helps people understand what just happened, where something came from and what they can do next. A panel that slides in from the side tells users it can be dismissed the same way. A button that briefly changes shape confirms that a tap registered. A list item that fades out after deletion shows exactly which item was removed. Without these cues, interfaces feel abrupt and users have to work harder to follow changes.
Poorly designed animation does the opposite. Slow transitions make products feel sluggish, random effects distract from the task and excessive motion can cause discomfort for people with vestibular disorders. The five tips below focus on getting the benefits of motion while avoiding these problems.
The five tips
- 1. Give it a purpose: Feedback, orientation, focus or continuity.
- 2. Keep it fast: Most UI transitions work best between 100 and 400ms.
- 3. Use natural easing: Ease-out for entering, ease-in for leaving.
- 4. Be consistent: Shared durations and curves in the design system.
- 5. Respect preferences: Reduce or remove motion when users ask for it.
The four main purposes of UI animation
| Purpose | What it does | Example |
|---|---|---|
| Feedback | Confirms an action was received | Button press, toggle switch, like animation |
| Orientation | Shows where content came from or went | Page slides, expanding cards, drawers |
| Focus | Draws attention to something important | A gentle pulse on a new notification |
| Continuity | Connects states so changes feel natural | A thumbnail growing into a full image |
If an animation does not serve one of these purposes, it is worth asking whether it should be there at all. Purposeless motion adds load without adding understanding.
Typical durations
| Interaction | Typical duration |
|---|---|
| Button press, toggle | 100–150ms |
| Menus, tooltips | 150–250ms |
| Modals, panels | 200–300ms |
| Page transitions | 300–400ms |
Choosing the right easing
Easing describes how an animation accelerates and slows down. In the physical world, objects rarely start or stop instantly, so linear motion tends to look mechanical on screen. Ease-out curves, which start fast and slow down at the end, work well for elements entering the screen because they arrive quickly and settle gently. Ease-in curves suit elements leaving, and ease-in-out curves suit elements moving from one position to another on screen.
- Ease-out: Elements entering: menus, modals, toasts.
- Ease-in: Elements leaving: dismissing panels or alerts.
- Ease-in-out: Elements moving across the screen.
- Spring: Playful or physical interactions, used sparingly.
Accessible motion
- Honour the prefers-reduced-motion setting
- Avoid flashing more than three times a second
- Never make animation the only way to convey information
- Let users pause looping or auto-playing motion
For the bigger picture, see the evolution of motion graphics. Motion rules belong in your design system so every team uses them.
A simple approach is to design two versions of important transitions: the full animation, and a reduced version that uses a quick fade or no motion at all. The reduced version should still communicate the same change, so users who prefer less motion never miss information.
Common animation mistakes
- Animating everything, so nothing stands out
- Using long durations that make users wait
- Mixing many different easing curves across the product
- Blocking interaction until an animation finishes
- Animating layout in ways that cause content to jump
- Ignoring how motion performs on older phones
Most of these mistakes come from treating animation as a final layer of polish rather than part of the interaction design. Planning motion alongside the flow, and reviewing it in context on real devices, avoids them.
Tools for designing and building motion
Designers can prototype motion in tools such as Figma, using smart animate and interactive components, or in dedicated motion tools for more complex sequences. Developers usually implement UI animation with CSS transitions and animations, the Web Animations API, or platform tools on iOS and Android. Lightweight formats such as Lottie allow designers to export vector animations that play efficiently in apps and websites.
Building motion into your design system
Consistency is what makes motion feel intentional. Define a small set of motion tokens, such as three or four durations and two or three easing curves, and document when to use each. Add motion specifications to every component in the design system so designers and developers use the same values. This prevents each team from inventing its own timings and keeps the product feeling coherent.
- Define short, medium and long duration tokens
- Name easing curves by purpose, such as enter, exit and move
- Document motion for each component state
- Provide code snippets developers can reuse
- Include reduced-motion alternatives
Testing animations
Animations should be tested like any other part of the interface. Check them on lower-powered devices, where heavy effects can stutter, and with reduced-motion settings turned on. Watch users in usability sessions to see whether motion helps them understand changes or simply slows them down. If people wait for animations to finish before they can act, the timings are probably too long.
Frequently asked questions
How long should UI animations be?
Most should be between 100 and 400 milliseconds; small feedback quicker, larger transitions slightly longer.
What is prefers-reduced-motion?
A device setting users can turn on to request less motion. Websites and apps should detect it and reduce or remove animations.
Which easing should we use?
Ease-out for elements entering, ease-in for elements leaving, and ease-in-out for elements moving on screen.
Can animation hurt performance?
Yes, especially when animating layout properties or large images. Animate transform and opacity where possible, and test on lower-powered devices.
Should every button have an animation?
Every button should give feedback, but that can be a simple colour or shadow change. Save more noticeable motion for moments that need extra clarity.