Exit animations
The person's attention is already on the next thing. An exit that fights for it is in the way.
A subtle exit is a small fixed translate – twelve pixels, not the height of the container – with opacity and a little blur, at about 150ms ease-out against an entrance of 300. Keep some direction so the eye knows where the thing went. A toast that came from the bottom leaves through the bottom.
Sometimes the right exit is none. When the motion adds no context, when the interaction repeats constantly, or when reduced motion is on, remove the element and move on.
- Exit duration shorter than the entrance: 150 against 300
- Small fixed translate, never the full container height
- Exit the way it entered; symmetric paths are what make swipe-to-dismiss feel obvious