In a design system's motion guidelines, why do enter and exit animations for the same element usually differ, and how?
answer
- where is the user's attention
- arriving needs noticing and orienting
- leaving was already decided
- exit shorter and simpler
- travel only when direction means something
basics
~20 sEntering content must be noticed and located, so it gets fuller motion showing where it came from. Exiting content was already dismissed, so it leaves faster and simpler, often a fade, unless its direction tells users where it went.
solid answer
~40 sThe asymmetry follows the user's attention. When something enters, the learner has not seen it yet: the motion has to catch the eye, show where the element lives and let it settle so it can be read. When something exits, the learner has usually just dismissed it and wants what comes next, so a long exit only delays the incoming content and the next tap. That is why guidelines typically make exits shorter and simpler than entrances, often a fade instead of a full reverse journey. The exception is an exit whose destination is information: a lesson moving into the completed group or a deleted note travelling to a recoverable bin should show where it went. Exits also usually start first and overlap the entrance rather than running strictly one after the other.
go deeper
Remember the shape: entrances are fuller and show where the element comes from; exits are quicker and simpler, often a fade.
Explain the attention argument behind the asymmetry, and when an exit should keep its direction because its destination tells the user something.
Show how you would audit a product's panels, sheets and lists for mirrored exits and serial handoffs, and how you would sequence exits that change layout.
Discuss how to encode the asymmetry as a system-wide rule that teams apply by default, while leaving room for exits that carry meaning.
## What the asymmetry is An **enter** animation brings an element onto the screen: a notes panel opening, a hint card appearing under a quiz question, a filter sheet rising over the course catalogue. An **exit** animation takes it away. A naive system plays the exit as the enter in reverse: same path, same length. Most mature motion guidelines instead make them **asymmetric**: the entrance is fuller and the exit is quicker and plainer. ## Why: the user's attention is not symmetric | | Entering element | Exiting element | |---|---|---| | Has the user seen it? | No | Yes, usually just now | | What does the user need? | To notice it, locate it, read it | To get it out of the way | | Who triggered it? | Often the system or a tap elsewhere | Often the user, deliberately | | Cost of a long animation | Acceptable, it is being watched | High, it delays the next thing | Three consequences follow: - **Entrances carry orientation.** The element should arrive from the place it belongs to: a side panel from its edge, a menu from the control that opened it. That origin is information about the element's place in the interface. - **Exits carry intent already fulfilled.** The learner closed the hint because they are done with it. Replaying the full journey makes them watch something they have already decided about, and it can block the content underneath. - **Exits usually overlap.** When one view replaces another, the outgoing content typically starts leaving first and the incoming content begins before the exit finishes, so the change reads as one movement rather than two sequential waits. The exact durations and the easing curves (why an entering element settles and a leaving one speeds away) belong to the duration-and-easing part of the system; the choreography rule is only the relationship between the two. ## When the exit should travel A plain fade throws away direction, which is fine when direction means nothing. It is not fine when **where the element went** is itself the information: 1. A lesson marked complete moves into the "completed" group, so the learner knows where to find it. 2. A deleted note moves toward a recoverable bin, which tells the learner it is not gone for good. 3. A panel docked to one edge returns to that edge, confirming it is still available there. In these cases the exit keeps its direction but still stays brief. The rule is not "exits never move", it is "exits move only when the movement says something". ## Examples on a learning platform - **Hint card under a quiz question.** Enters by expanding and fading in beneath the question so the learner sees it belongs to that question. Exits with a short fade and the space closes after it. - **Course filter sheet.** Rises from the bottom edge on open. On apply, it drops back quickly toward the same edge while the filtered list updates; the learner's attention is on the results, not the sheet. - **Lesson notes panel.** Slides in from its edge; on close, a shorter slide back to that edge, because the edge is where it will come from next time. - **"Lesson saved" confirmation on screen.** Enters with enough motion to be noticed; exits by fading, since nothing about its departure matters. ## Sequencing an exit that changes layout When the exiting element occupies space in a list or a column, two things happen: the element leaves and its neighbours close the gap. Doing both at once makes it hard to see which item left. A common sequence is: 1. The item fades or moves out. 2. Only then do its neighbours slide up to fill the space. For an entrance the order flips: the space opens first, then the new item appears in it. Both orders serve the same goal, which is to make it clear **which** element changed. ## Common mistakes - Mirroring every entrance exactly on exit, so closing a panel feels as slow as opening it. - Making exits so abrupt that the element seems to vanish with no confirmation the action happened; a short fade is still motion. - Dropping direction on exits where the destination is the point, such as an archived or completed item. - Holding the incoming view until the outgoing one has fully finished, doubling the wait.
- When is it acceptable for an exit to be as long as the entrance?When the exit carries the main information of the interaction. If a learner drags a lesson into a module and releases it, the settling motion into the module is the confirmation of where it went, so it earns the full journey. The test is whether the user is watching the departure to learn something, or waiting through it to reach the next thing.
- Why do outgoing and incoming views usually overlap instead of running one after the other?Running them in sequence adds their durations, so the user waits twice for one change. Overlapping them, with the exit starting slightly earlier, keeps the total short and makes the swap read as a single movement. The early start matters because two elements arriving and leaving with equal emphasis at the same instant compete for the eye.
saying these in an interview costs you the question
- Says an exit should always be the exact reverse of the entrance.
- Believes exits should never move, only disappear instantly.
- Plays the outgoing and incoming views strictly one after the other.
- Thinks the exit deserves more emphasis because the user caused it.
- Drops direction on an exit whose destination is the information.