Motion · Interaction
Enter & Exit
Elements fade and grow in from 95% scale, and leave faster than they came. Nothing appears from nothing.
Changes saved
Your profile is up to date.
Specs#
| Enter | opacity 0→1, scale 0.95→1, blur 4px→0 · 200ms |
| Exit | opacity 1→0, scale 1→0.97 · 150ms |
| Easing | --ease-out |
| Tool | AnimatePresence |
| Built with | Motion |
Guidelines#
Use for
- Panels, banners and cards that mount or unmount
- Notifications and inline confirmations
Avoid
- scale(0) — use 0.95 or higher
- Exit slower than enter