May 24, 2026 · The Studio
Motion on the web is rarely judged consciously. Nobody finishes a page thinking "those transitions were a tasteful 0.85 seconds." But they feel it — the difference between an interface that responds and one that merely moves.
The secret isn't the animation. It's the timing.
The real world has easing
Nothing in the physical world starts or stops at a constant speed. A door swings open fast and settles slow. A dropped ball accelerates, bounces, decays. Our eyes are tuned to this, and an interface that ignores it reads as cheap.
That's why a linear transition feels robotic, and a well-chosen ease feels natural — it borrows the physics our brains already expect.
Two curves do most of the work
- Ease-out for things entering — fast in, gentle landing. The element arrives with confidence and settles into place. Use it for reveals, panels, and anything appearing.
- Ease-in-out for things moving between two states — it leaves and arrives with care. Use it for repositioning, expanding, and morphing.
Reserve sharp, snappy curves for small, direct feedback (a button press), and slow, expressive curves for large, cinematic moments (a page transition).
Duration is a feeling, not a number
A rough scale that rarely lets you down:
- Under 150ms — instant feedback. Hovers, taps, toggles.
- 200–500ms — the comfortable range for most UI transitions.
- 600ms and up — reserved for hero reveals and page-level motion, where the length itself becomes part of the drama.
Too fast and the motion is invisible — you've paid for animation and gotten nothing. Too slow and you're making the visitor wait on you. The sweet spot is the shortest duration that still reads as deliberate.
Motion with a purpose
Every animation should answer a question the user is already asking. Where did this come from? Where did it go? What just changed? Motion that answers those questions is invisible in the best way. Motion that doesn't is decoration — and decoration in motion is the fastest way to make a site feel cheap.
Animate to explain, not to impress. The impression takes care of itself.