Overlay & Dialog Components
Overlays are where animation stops being decoration and starts being explanation: a modal that grows out of the button you pressed tells you where you are, and a sheet you can drag tells you how to leave. Each component here ships that spatial logic already choreographed.
7 UI elements · no build step
£50
Every current and future premium UI element. 33 today, and every one we add to this line.
£99
All three lines: 65 effects, 54 templates and 33 UI elements. 152 today, plus everything we release next.
What a good overlay actually has to do
The hard part of an overlay is not showing it, it is accounting for where it came from. The modal here uses GSAP Flip to expand from the trigger button itself, so the dialog is visibly the same object you pressed, and closing returns it there. The bottom sheet tracks your finger with real inertia and settles to detents, so dismissing it feels like putting something down rather than pressing a hidden close button.
Stacking and queueing are handled, because real apps fire more than one notification. The toast queue collapses older entries into a stack and re-fans them on hover, with each toast animating in and out independently; the context menu and popover position themselves against their trigger and flip sides when they would leave the viewport.
Dismissal is complete in every direction: Escape closes, the backdrop closes, drag past the last detent closes, and each close animation runs in reverse before the element is hidden, so an invisible layer is never left covering the page and intercepting clicks. Focus returns to the element that opened the overlay.
As with everything in the catalogue, prefers-reduced-motion collapses the choreography to instant state changes rather than a broken half-animation, and every component tears down its listeners cleanly for single-page apps.
How to wire an overlay into your page
Overlays ship as a trigger plus the overlay markup, with the open and close choreography already bound. Integration is markup placement, then tokens.
- 01
Copy the three includes
Stylesheet, the GSAP CDN tag the component was built against (Flip is included where the effect needs it), then the component script, in that order.
- 02
Place the trigger and the overlay markup
The trigger goes where the user acts; the overlay block sits at the end of body so nothing clips it. The script connects the two by id.
- 03
Put your content inside the shell
The dialog body, sheet content and toast text are plain HTML regions. Replace them freely; sizes are measured at open time, so the morph and the detents adapt to your content.
- 04
Pick a variant, then retune its tokens
Backdrop dim and blur, surface, radius and accent are custom properties per variant. Change the data-variant attribute to switch looks, or copy a variant block and make your own.
body[data-variant="vault"] {
--backdrop: rgba(8, 8, 12, 0.6);
--backdrop-blur: 6px;
--surface: #14141a;
--ink: #f4f1ea;
--radius: 18px;
}Overlays & Dialogs at a glance
| Component | What it does | Built with | Price |
|---|---|---|---|
| Fluid FLIP Modal | A dialog system built on one GSAP Flip morph: any trigger on the page becomes the dialog and back again, in three placements, with stacking, a validated form and the full overlay contract. | Flip | £5 |
| Draggable Bottom Sheet | A multi-detent bottom sheet: peek, half and full, snapped by release velocity, with scrollable content that hands the gesture back to the sheet only at the top of the list. | Draggable | £5 |
| Stacked Notification Toasts | A complete toast system: five types, an action button that resolves back to your code, a countdown that pauses on hover, swipe-to-dismiss and a promise helper that morphs one toast through its states. | GSAP core | £5 |
| Side Drawer Panel | Right-hand slide-in panel with a dimmed backdrop, a fixed header, a scrollable body, and drag-to-close on the x axis. | Draggable | £5 |
| Spring Context Menu | Right-click menu that springs out of the corner nearest the pointer, clamps itself inside the viewport and flies a submenu out sideways. | GSAP core | £5 |
| Morphing Popover Tooltip | One floating bubble serves every target: position, width, height and arrow all tween, so the tooltip travels between targets instead of blinking out and back. | GSAP core | £5 |
| Onboarding Tour Spotlight | Product tour that dims the page except a spotlight cutout, morphs the cutout from target to target, and floats a tooltip card with Back, Next and Skip. | GSAP core | £5 |
Frequently Asked Questions
Do the modals and sheets handle focus and Escape properly?
Yes. Opening moves focus into the dialog, Escape and backdrop clicks close it, the close animation runs fully before the overlay is hidden, and focus returns to the trigger. Nothing is left invisible on top of the page.
Does the bottom sheet work with the page scrolling behind it?
Yes. The sheet locks background scroll while open and releases it on close, and its own content scrolls independently. Drag-to-dismiss reads net displacement, so scrolling the sheet content is not mistaken for a dismiss gesture.
Can I fire toasts from my own code?
Yes. The toast queue exposes a plain function you call with a message; the demo buttons only exist to show it. Queueing, stacking and timed dismissal are handled inside the component.
What happens for users with reduced motion enabled?
Every overlay checks prefers-reduced-motion and swaps the choreography for instant open and close states. The behaviour, focus handling and dismissal all still work; only the tweening is removed.
