Feel the difference
Every UI animation lives or dies by two decisions: how long it takes, and how it accelerates. Drag the slider below and open the dropdown — the right speed is immediately obvious.
Duration tiers
Not every animation should be the same speed. The right duration depends on what the animation communicates:
- Micro (60–120ms) — button presses, toggles, checkboxes
- Short (120–200ms) — hover states, tooltips, fade-ins
- Medium (200–300ms) — modals, dropdowns, page transitions
- Max (300ms) — the ceiling. Anything longer feels sluggish.
Choosing the right easing
Duration controls how long. Easing controls how it feels. The same 250ms dropdown feels completely different with linear vs ease-out.
One rule dominates: never use ease-in for UI animations. Ease-in starts slow — it makes the interface feel unresponsive. Ease-out starts fast and decelerates, matching how physical objects move.
Exit animations: faster is better
When something leaves the screen, the user is already moving on. Exit animations should be roughly 60% of the entrance duration — fast enough to feel snappy, but present enough to avoid a jarring pop.
Perceived performance
Staggered animations feel faster than simultaneous ones, even when the total duration is the same. The sequential reveal gives the eye something to track, creating a sense of progress.
Quick reference
| Context | Duration | Easing |
|---|---|---|
| Button press | 80ms | ease-out |
| Hover state | 150ms | ease-out |
| Tooltip appear | 150ms | ease-out |
| Modal enter | 250ms | cubic-bezier(0.16, 1, 0.3, 1) |
| Modal exit | 150ms | ease-in-out |
| Page transition | 300ms | cubic-bezier(0.23, 1, 0.32, 1) |
Key takeaways
- Cap all UI transitions at 300ms — anything longer feels sluggish
- Match duration to importance: micro (80ms), hover (150ms), modal (250ms)
- Never use ease-in for entrances — it makes the UI feel unresponsive
- Exit at ~60% of entrance duration for snappy dismissal
- Stagger reveals to create perceived speed without adding duration