modal dialog overlay scale fade animate modal entry without a harsh pop soften dialog appearance for app UI reuse for drawer or sheet overlays overlays appear too abruptly modal motion feels mechanical instead of intentional dialogs need reduced-motion safe entry behavior
Modal Scale Fade
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/modal-scale-fade.json Preview
Background
Customize
Quick Start
<div class="modal-scale-fade" data-state="open">...</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 859 bytes · 33 lines
- Custom Properties
-
--modal-scale-from--modal-y-from--modal-duration--modal-ease - Classes
-
.modal-scale-fade
modal dialog overlay scale fade
Apply .modal-scale-fade to the panel element itself, then toggle data-state="open" or data-state="closed" to control the motion state.
Good fit for modal, dialog, drawer, and confirmation surfaces where the container should feel placed instead of dropped onto the page.