Back to UI Elements
ui-004
Fluid FLIP Modal
£5 Standard License Unlimited projects
Button-to-dialog transition: the trigger morphs into the modal with GSAP Flip, backed by a blurred overlay and spring easing.
About This Component
Button-to-dialog transition: the trigger morphs into the modal with GSAP Flip, backed by a blurred overlay and spring easing. Ships in three looks, vault, paper and brutal, switched by one data-variant attribute and defined entirely in CSS custom properties, so the same script serves all three. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework.
What's Included
- Trigger morphs into the dialog with GSAP Flip
- Backdrop blur fades in and out with the dialog
- Closes on the close button, backdrop click and Escape
- role="dialog" and aria-modal, focus returns to the trigger
- Spring easing on open, quick ease on close
- Three shipped variants: vault, paper, brutal
Perfect For
- Checkout and confirmation dialogs
- Onboarding and feature announcements
- Any modal that should feel launched from its button
How It Works
Shared-element morph
Flip.getState captures the trigger button, the dialog is shown in its place, and Flip.from animates from the button's box to the dialog's box while the backdrop fades in.
Plugins Flip
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates