Modal Enter / Exit
Choose modal motion when the interaction should pause the page without feeling like a new page.
Timing
Backdrop fade around 150-220ms; modal scale/fade around 180-260ms.
Easing
Use ease-out or a restrained spring on entry; avoid bouncy exits for serious tasks.
Risk
Live Demo
What It Is
A combination of a fading background overlay and a modal window that scales and fades into the center of the viewport.
Decision Guidance
Choose modal motion when the interaction should pause the page without feeling like a new page.
Best For
Focused decisions, compact editing flows, and confirmations that should preserve page context.
Avoid When
Avoid for long workflows, full-page forms, or navigation that deserves its own route.
Timing
Backdrop fade around 150-220ms; modal scale/fade around 180-260ms.
Easing
Use ease-out or a restrained spring on entry; avoid bouncy exits for serious tasks.
Risk Tags
✓When to Use
- Confirmations and alerts
- Editing details in a dashboard
- Sign-in prompts
✕When NOT to Use
- Full-page takeovers (use slide instead)
Configuration Tips
- 01Modal should initial from scale 0.95 and opacity 0
- 02Backsplash should fade in (opacity 0 to 0.5) over 200ms
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Animate this popup modal. The background should fade to dark, and the modal card should scale up slightly and fade in exactly in the middle.
Code Example (Tailwind CSS)
export function ModalEnterExitDemo() {}