How to Animate Toast Notifications In and Out
How to animate toasts and snackbars: where they should come from, how long to hold them, stacking behaviour, and why motion cannot carry the message alone.
Core Takeaway
A toast should enter from the edge it belongs to, hold long enough to read, and leave faster than it arrived. Animate transform and opacity, keep the exit short, and pause the timer while the user hovers or focuses. Motion is not the message: screen reader users need a live region, and an error should not disappear before it can be read.
Enter from the edge the toast belongs to
A toast that appears from the bottom should slide from the bottom; a notification anchored top-right should come from the top right. This gives the message a physical home and prevents the eye from hunting for it. Avoid animating from the centre of the screen, which makes short messages feel like alerts.
Enter, hold, exit are three different timings
The entrance needs enough time to be noticed. The hold is not an animation; it is reading time. The exit should be quick, because the user has already absorbed the message. Putting a long fade on the exit makes the interface feel sluggish exactly when the user wants to move on.
Stacking without jumping
When several toasts arrive, decide whether new ones push the stack, appear above it, or replace the oldest. Whatever you choose, animate the reflow. Toasts that snap into a new position while another one animates look broken. If the queue can grow, cap it and collapse older messages.
Give the user time and control
Pause the auto-dismiss timer on hover and on keyboard focus. Do not auto-dismiss errors, or anything that contains an action the user must take. A toast that disappears before it is read is worse than no toast.
Motion is not the announcement
A slide-in animation tells sighted users that something appeared. Screen readers need a live region with the right politeness, and important messages need to stay in the DOM long enough to be read. Use a status role for routine confirmations and an alert role sparingly, since it interrupts.
Reduced motion
Replace the slide with a short fade and keep the position change instant. The message still needs to appear in a predictable place, so do not remove the layout movement that helps the user find it.
Key Principles to Remember
- Enter from the edge the toast is anchored to
- Hold for reading time, then exit faster than you entered
- Animate stack reflow so messages do not jump
- Pause dismissal on hover and focus, and never auto-dismiss errors
- Pair the motion with a live region for screen readers
Frequently Asked Questions
Sources
- ARIA live regions — MDN Web Docs
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs