How to Animate a Modal Open and Close
How to animate a dialog so it feels connected to its trigger: origin, backdrop timing, enter and exit speeds, interruption and focus handling.
Core Takeaway
Animate the modal from the element that opened it, or from the area the user was looking at, so the change has a spatial source. Fade the backdrop and move the panel on separate timings, make the exit faster than the entrance, and keep focus management outside the animation. A modal that scales up from the centre of the screen feels generic; one that grows from its trigger feels like it belongs to the page.
Start from the trigger
Spatial continuity is the whole trick. If a card opens a detail dialog, the panel can expand from that card. If a toolbar button opens settings, the panel can emerge near the button. This tells the user where the new layer came from and where it will return. Computing the origin takes a little work, but it is the difference between a dialog that feels attached and one that feels pasted on.
Move the backdrop and the panel separately
The backdrop is usually an opacity change, which is cheap to animate. The panel should move or scale. Running both on the same curve makes the whole screen feel like one flat image. A slightly delayed backdrop, or a backdrop that fades faster than the panel settles, reads as depth.
- Backdrop: opacity only
- Panel: transform and opacity
- Avoid animating blur radius on large surfaces, because it is expensive
- Keep a solid fallback colour while the backdrop fades in
Exit faster than entrance
Users already know what is closing, so the exit does not need to teach them anything. A shorter exit also gets them back to their task sooner. A common pattern is a slightly slower entrance that shows the panel's shape, then a quick fade and scale down on close.
Make the transition interruptible
If a dialog can be opened and closed quickly, the animation should read the current state rather than restarting from zero. That is the difference between a transition and a state machine. If a user closes the dialog while it is still opening, the panel should reverse from where it is, not jump.
Focus, escape and reduced motion
Animation and focus handling are separate jobs. Move focus into the dialog when it opens, trap it while it is open, and return it to the trigger on close. The WAI-ARIA dialog pattern describes the expected keyboard behaviour. For reduced motion, shorten or remove the transform and keep a quick opacity change so the layer change is still visible.
Mistakes that make modals feel cheap
Scaling from zero looks like a pop rather than a movement. A long fade makes the app feel slow. Animating the backdrop blur on a large screen can drop frames. And locking scroll before the animation starts can cause a visible jump. Fix the jump first; it is usually more noticeable than the animation itself.
Key Principles to Remember
- Give the panel a spatial origin, ideally the element that opened it
- Animate backdrop opacity and panel transform separately
- Keep the exit shorter than the entrance
- Let an interrupted open reverse from its current position
- Focus management is separate from the animation and must still work
Frequently Asked Questions
Sources
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev