Duration & Asymmetric Timing
10 minDuration & Asymmetric Timing
Easing defines the shape of an animation. Duration defines how long the user waits. Get the curve right and the duration wrong and the animation still feels broken—either so fast it's invisible or so slow it's a hostage situation.
The instinct is to set a single duration variable and apply it everywhere. This is wrong. Different components move at different speeds because they serve different cognitive purposes and occupy different amounts of screen space. A button's press response and a full-screen modal entrance are not the same animation and should not share the same timing.
Duration by component type
These ranges aren't arbitrary. They're calibrated to the speed of human visual processing—the eye needs roughly 100ms to register a change, and anything beyond 300ms starts to feel deliberate rather than responsive.
| Component | Enter duration | Exit duration | Notes | |---|---|---|---| | Button press / micro-feedback | 50–100ms | 50–80ms | Must feel instant | | Tooltip | 100–150ms | 75–100ms | Fast in, faster out | | Popover / dropdown | 150–200ms | 100–150ms | Emerges from trigger | | Toast / notification | 200–250ms | 150–200ms | Slides from edge | | Modal / dialog | 200–350ms | 150–200ms | Scale + opacity | | Drawer / sheet | 250–350ms | 200–250ms | Slides across significant distance | | Page transition | 150–250ms | 100–150ms | Keep it tight |
The pattern: larger components that travel more distance get more time. Smaller components that need to feel responsive get less. No component should exceed 400ms for entry—anything longer and the user perceives the interface as sluggish regardless of the easing curve.
Enter slow, exit fast
This is the single most important timing rule in interface animation: entrances should be slower than exits.
When an element enters, the user needs time to register its appearance, understand its content, and build a mental model of where it sits in the interface. A 250ms entrance gives the eye time to track the element into its resting position. The deceleration at the end (from the ease-out curve) reinforces the "settling" feeling.
When an element exits, the user has already decided to dismiss it. They pressed the close button, they clicked outside the modal, they swiped the toast away. They don't need to track the element leaving—they need it gone. A 150ms exit with an ease-in curve (accelerating away) satisfies this expectation. The element acknowledges its departure without lingering.
The typical ratio is 1.5:1 to 2:1—enter at 250ms, exit at 150ms. Some components can push this further. A drawer that enters at 300ms might exit at 180ms. A tooltip that enters at 150ms should exit at 80ms.
The mistake is making them symmetric. A modal that takes 300ms to enter and 300ms to exit feels wrong on the dismissal—the user is waiting for something to go away that they've already mentally moved past.
The 300ms budget
Total animation time for any single interaction—enter plus settle—should not exceed 300ms. This isn't an arbitrary threshold. It's the boundary between "responsive" and "I'm waiting." Research on perceived responsiveness consistently places this boundary in the 200–400ms range, and 300ms gives enough room for a satisfying animation without crossing into perceived delay.
This budget applies to sequences too. If you're staggering five items at 50ms intervals, the total stagger is 250ms, and each item's own animation adds to that. Monitor the total. A beautifully orchestrated stagger that takes 800ms to complete will make users think the page is still loading.
Duration and distance
The further an element travels, the more time it needs—but not linearly. A drawer sliding 300px from the edge needs maybe 300ms. A tooltip appearing 8px below its trigger needs 100ms. But a panel sliding 600px doesn't need 600ms—it needs maybe 350ms, because the eye can track faster motion over longer distances once it understands the direction.
The relationship is roughly logarithmic: double the distance, add 30–50% more duration, not 100%.
When to skip duration entirely
Some state changes should be instant. Toggle states (on/off switches, checkbox fills), colour transitions within hover effects, and focus-visible outlines should have zero or near-zero transition duration. These are binary state changes where the user expects immediate feedback, and any perceptible delay—even 50ms—reads as input lag rather than animation.
The rule: if the state change is binary and the visual difference is small, skip the transition. Let the CSS paint the new state on the next frame.