Make exits quieter than enters

Exits move less: a small fixed offset with fade and blur.

Jakub Kreheljakub.kr
Exit animations often work better when they’re more subtle than enter animations. The exiting elements don’t need the same amount of attention as the ones entering.
Details that make interfaces feel betterRead article ↗
Jakub Krehel@jakubkrehel
Exit animations should be softer and less attention-grabbing than enter animations. The user's focus is moving to the next thing — don't fight for attention.
make-interfaces-feel-better, animations.mdView source ↗

From design-motion-principles, cookbook §1 Exit subtlety.

Toast stack

Send a few, or Burst. Past four, the oldest leaves.

Exit retraces enterBad
exit: translateY(calc(-100% - 4px))
Small fixed exitGood
exit: translateY(-12px)

Symmetric vs asymmetric

Toggle quickly and compare the exits.

exit = enterBad
Invite sentmaya@studio.dev
initial y: 20 · exit y: 20
exit smaller, reversedGood
Invite sentmaya@studio.dev
initial y: 20 · exit y: -8

When the rule flips

Delete a file, then expire one. Compare the exits.

One quiet exit for allBad
    delete, expire: y -12px
    Exit weighted by causeGood
      delete: x 100%expire: y -12px

      Why it matters, pros and cons

      Why it matters

      Users already look at what's next. A full-distance exit competes with it.

      Pros

      • Stacks stay calm during rapid sequences.
      • A small offset still shows direction.
      • The next state lands sooner.

      Cons

      • User deletions deserve a visible exit.
      • Drawers returning to an edge need continuity.
      • A tiny offset without fade reads as a glitch.