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.

10 UI elements, no build step

~~£99~~£79.20

Halloween: 20% off the Vault until 31 October. Ends in 15d 15h 17m 04s

UI Elements Pass

£50

Every current and future premium UI element and component kit. Includes all 48 premium UI elements and kits available now, plus every future release in this line.

The Vault

£79.20

All 295 premium items in the Vault library, plus future additions to the library.

ui-004 £10

Animated Modal Dialog

An accessible animated modal dialog: the button you press morphs into the dialog and back, with side and centred placements, stacking and focus trapping.

Flip micro-interaction

ui-005 £10

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 micro-interaction

ui-006 £10

Toast Notifications

Toast notifications for web apps: five types, undo actions, a pause-on-hover countdown, swipe to dismiss and a promise helper for loading states.

micro-interactionstagger

ui-012 £10

Slide-Out Drawer

A slide-out drawer for settings, carts and filters: flick to dismiss, rubber-band pull, a backdrop that tracks the drag, left or right.

Draggable dialog-animation

ui-013 £10

Right-Click Context Menu

A right-click context menu for lists and tables: per-row items from data, typeahead and submenus, springing out of the corner nearest the pointer.

micro-interactionspring-physics

ui-014 £10

Animated Tooltip

An animated tooltip that travels between targets: one bubble tweens its position, size and arrow instead of blinking out and back in.

micro-interactionmorphing

ui-029 £10

Product Onboarding Tour

A product onboarding tour: the page dims except a spotlight that scrolls to each step and morphs between them, with a card that flips to the side with room.

spotlightmask-reveal

ui-038 £10

Cookie Consent Banner

A GDPR cookie consent banner: a compact card Flip-morphs into per-category preferences, fires a consent event and remembers the choice.

Flip flip-layout

ui-039 £10

Exit Intent Popup

An exit intent popup for promo codes and email capture: exit, scroll, delay or manual triggers, frequency capping and an accessible modal.

dialog-animationfocus-management

ui-051 £10

Notification Bell Dropdown

A notification bell dropdown: an unread badge opens an inbox with All and Unread tabs, mark as read, dismiss and a rolling badge count.

Flip flip-layout

Browse all 59 UI elements

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.

The variant block you edit

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

Compare the 10 components in this category by what they do, what they are built with, and price.
Component	What it does	Built with	Price
Animated Modal Dialog	An accessible animated modal dialog: the button you press morphs into the dialog and back, with side and centred placements, stacking and focus trapping.	Flip	£10
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	£10
Toast Notifications	Toast notifications for web apps: five types, undo actions, a pause-on-hover countdown, swipe to dismiss and a promise helper for loading states.	GSAP core	£10
Slide-Out Drawer	A slide-out drawer for settings, carts and filters: flick to dismiss, rubber-band pull, a backdrop that tracks the drag, left or right.	Draggable	£10
Right-Click Context Menu	A right-click context menu for lists and tables: per-row items from data, typeahead and submenus, springing out of the corner nearest the pointer.	GSAP core	£10
Animated Tooltip	An animated tooltip that travels between targets: one bubble tweens its position, size and arrow instead of blinking out and back in.	GSAP core	£10
Product Onboarding Tour	A product onboarding tour: the page dims except a spotlight that scrolls to each step and morphs between them, with a card that flips to the side with room.	GSAP core	£10
Cookie Consent Banner	A GDPR cookie consent banner: a compact card Flip-morphs into per-category preferences, fires a consent event and remembers the choice.	Flip	£10
Exit Intent Popup	An exit intent popup for promo codes and email capture: exit, scroll, delay or manual triggers, frequency capping and an accessible modal.	GSAP core	£10
Notification Bell Dropdown	A notification bell dropdown: an unread badge opens an inbox with All and Unread tabs, mark as read, dismiss and a rolling badge count.	Flip	£10

Related guides

59 animated UI components built with GSAP (2026)

59 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven 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.

Browse all UI elements What GSAP UI elements are