Most interface animations fail not because they're wrong, but because they're arbitrary. Timing is a design decision, and like most design decisions, it benefits from constraints.
Open any design tool and you’ll find a duration slider. It usually defaults to 300ms. Nobody knows why 300ms. It became the default because someone picked it, it shipped, and it propagated. Now it’s everywhere — not because it’s right, but because it’s familiar.
This is how most interface animation gets made. Not from principles, but from defaults. The result is interfaces that move, but don’t communicate — motion as decoration rather than motion as meaning.
Duration is not a style choice. It is a claim about how much something has changed.
The human visual system is calibrated to physical motion. Objects in the world don’t start and stop instantaneously — they accelerate and decelerate under inertia. Interfaces that ignore this feel wrong without users being able to say why. Interfaces that honor it feel right without users noticing it at all.
This is the goal: motion so well-calibrated it disappears.
Three variables govern every transition: duration, easing, and distance. Each should be determined by the semantic weight of the change:
The principle: the more context that changes, the longer the brain needs to reorient. Duration should be proportional to perceptual disruption, not to the designer’s preference for “snappy” or “smooth.”
The most common failure is symmetric easing: the same curve in both directions. But enter and exit are semantically different. Something entering the scene deserves emphasis — it’s arriving. Something leaving deserves less — it’s going. Ease-out on enter, ease-in on exit, with the exit slightly faster. This is the natural rhythm of attention.
The second failure is duration inflation. Longer animations feel more considered to designers and more tedious to users. The user’s goal is never to watch an animation — it’s to get to what the animation is revealing. Respect that.