Enter and Exit: The First Motion to Get Right
The four ways an element can arrive on screen, when to use each, and the one rule that makes them feel native: exits run faster than entrances. Includes an interactive demo you can replay.
Why this is the first thing to get right
Most interfaces spend their motion budget on the wrong moment. The arrival of an element is the one users actually read: a toast, a menu, a saved confirmation. Get the entrance right and the interface feels considered. Get it wrong, with a slow blur-in on everything, and it feels like the page is buffering.
This is the smallest, highest-leverage motion decision you make. So it is the place to start.
The four ways something arrives
Every entrance is a combination of opacity and one transform. That is it. Four styles cover almost everything:
- Fade changes opacity only. The calmest option. Right for anything subtle.
- Slide moves a short distance while fading in. The direction implies where the thing came from.
- Scale grows from slightly smaller. Good for things that expand from a point, like a popover.
- Pop scales up with a small overshoot, so it lands with a bounce. Use it sparingly, for moments worth celebrating.
Pick a style below and replay it. Watch how different the same element feels:
See it move
Enter & Exit
Same element, four entrance styles. Notice the exit is quicker than the entrance, the way real UI feels.
The one rule: exits run faster
An element arriving is information. An element leaving is just cleanup. The user has already moved on, so the exit should get out of the way.
Make the exit about 75 percent of the entrance. A 320ms entrance pairs with a roughly 240ms exit. You can feel it in the demo above: the chip comes in deliberately and leaves quickly. Equal-length exits are the most common reason custom motion feels sluggish.
How to brief it
Once you can name the style, you can brief it precisely to an engineer or an AI model:
Toast entrance: slide-up 16px plus fade, 300ms, ease-out. Exit: fade plus 8px down, 220ms.
That is a complete, buildable instruction. Compare it to “make the toast animate in nicely,” which produces a guess.
Respect reduced motion
Some people get motion sick from movement you find delightful. Every entrance here collapses to a plain fade, or nothing, when the user has prefers-reduced-motion set. The demo above already does this. Treat it as non-negotiable, not a nice-to-have.
Next
This is one entry in a larger vocabulary. See the full Animation Vocabulary for the rest, or continue the path with Hover and Press feedback.
Finished this lesson?
Mark it complete to track your progress through "Motion & Animation".