# Overlay & Dialog Components

> GSAP overlay components with the choreography built in: Flip-powered modals, drag-to-dismiss bottom sheets, stacked toast queues, drawers, popovers and tour spotlights.

Canonical: https://gsapvault.com/ui-elements/category/overlays-dialogs

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.

## 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.

1. **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.
2. **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.
3. **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.
4. **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.

```css
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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/stacked-toast-queue) | 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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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 |

## Components in This Category

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/fluid-flip-modal)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/fluid-flip-modal.md)

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/draggable-bottom-sheet)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/draggable-bottom-sheet.md)

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/stacked-toast-queue)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/stacked-toast-queue.md)

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/side-drawer-panel)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/side-drawer-panel.md)

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/spring-context-menu)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/spring-context-menu.md)

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/morphing-popover-tooltip)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/morphing-popover-tooltip.md)

### 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.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/onboarding-tour-spotlight)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/onboarding-tour-spotlight.md)

## Related Guides

- [35 animated UI components built with GSAP (2026)](https://gsapvault.com/blog/gsap-ui-components) ([Markdown](https://gsapvault.com/blog/gsap-ui-components.md)): 35 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Two are completely free to download.

## 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.

## Related Categories

- [Navigation & Menu Components](https://gsapvault.com/ui-elements/category/navigation-menus)
- [Button & Feedback Components](https://gsapvault.com/ui-elements/category/feedback-status)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects, UI components and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt