Motion
Transition & Easing
Transition and easing shape how a value moves from A to B over time — its duration and the curve of speed it follows — instead of snapping there instantly.
Definition
A transition is what lets a value move from A to B over time instead of snapping there instantly. There are really only two things you decide. The first is duration — how long the change takes. The second is easing — the rhythm the value follows during that time. Easing decides whether it moves at a steady pace, starts fast and slows to a gentle stop, or eases in and then rushes out. That is why people call it the "curve of speed." Get just these two right and your screen's motion instantly looks calmer and more deliberate.
Why does it matter?
Our eyes accept a change we can follow far more easily than one that jumps out of nowhere. When a button color flips instantly, your eye flinches, but a short transition connects the before and after so your brain gets a moment to register what actually changed. Easing especially shapes the whole impression of the motion. Real objects start from rest, pick up speed, and ease to a stop, so a curve that imitates that rhythm feels natural on screen too. A constant speed from start to finish, by contrast, reads as mechanical and stiff. A well-chosen curve can make the exact same duration feel noticeably more polished. In the end a good transition is not decoration meant to show off — it is a quiet courtesy that keeps the user from missing the change.
Common mistakes
- Setting durations far too long. Once you stack up motions that run past 500ms, the whole interface starts to feel sluggish, and users wait for an animation to finish before they can do the next thing. Keep motion just long enough to be noticed and no longer.
- Reaching for the default linear or ease on every change without a second thought. If you never pick an easing that fits the situation, the motion turns flat or unnatural — and using the same curve for elements entering and leaving feels especially off.
- Letting the speed and rhythm of transitions vary all over one screen. If one button snaps quickly while a card drifts slowly, the sense of unity falls apart, and the screen looks scattered no matter how nice each single motion is.
Practical tips
- Make ease-out — fast at the start, gently slowing to a stop — your default for most UI changes. Save linear for places where a constant speed fits, like a loading spinner, and spend springy, bouncy curves only on the one or two things you truly want to emphasize.
- Match duration to the size of the change. Something entering the screen in a big way feels right around 200–300ms, while a small shift in color or shadow sits comfortably near 150ms. Pin these down to a few shared values as a team so the rhythm stays steady across screens.
- Do not animate everything just because you can. Apply a transition only to the changes you genuinely want to highlight so the motion registers, and leave the rest still so the screen never turns busy.