Exit Intent Popup

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the component markup (the block between <!-- Component starts here --> and <!-- Component ends here --> in index.html) anywhere in <body>. Its root looks like this:

Code snippet omitted: it ships with the download.

data-exit-popup is what the script looks for. Keep the hidden attribute on the root: that is the closed state.

4. Listen for the email:

Code snippet omitted: it ships with the download.

The form never posts anywhere by itself; popup:submit is the hand-off to your provider.

What's Included

• index.html: the demo page, the component markup and the theme toggle
• assets/style.css: the component and both complete themes as custom properties
• assets/script.js: readable, commented GSAP core source with the public API, the triggers and cleanup
• assets/script.min.js: minified production script
• thumbnail.html: build-only capture state

Using It With Your Own Design

What the component needs from your markup: the root carrying data-exit-popup, and inside it these hooks, which are the script's whole contract:

Hook	What it is
data-backdrop	The dimming layer; click closes
data-dialog	The card, with role="dialog" aria-modal="true" aria-labelledby aria-describedby
data-panel-media	The left (image) panel, aria-hidden because it is decorative
data-panel-content	The right panel; carries data-lenis-prevent because it can scroll vertically on a short viewport
data-headline	The heading; the script splits it into word spans at init
data-reveal	Anything that should fade up after the headline (the body, the field, the dismiss link)
data-form	The form; its input[type="email"] receives focus on open, its [type="submit"] is the button that morphs
data-submit-label / data-submit-done	The two labels inside the submit button that crossfade
data-close / data-dismiss	Anything that closes the popup (the × and the "No thanks" link)

The offer panel is pure CSS: a flat accent wash (--media-bg), a hairline against the content panel (--media-line), the figure and its two lines of supporting copy (--media-ink). Replace its contents with an <img> if you have one; the script only moves the panel.

What is only the demo's furniture: the short document behind the popup (the .stage-doc rules and the <article> that uses them, there so the popup has a page to open over and the scroll lock has something to lock), the 44px toolbar strip across the top with the "Open popup" button and the theme toggle, and the Google Font links. Delete all of it; none of it is part of what you bought, and nothing in assets/script.js reads a .stage-* class. The demo root uses data-trigger="exit scroll delay manual" data-delay="6000" data-scroll="60" data-once="never" so every rule is reachable and the toolbar's button can re-show it; your page wants the defaults.

CSS the component depends on: never put a CSS transform on [data-dialog], the two panels, the headline words or the submit button. GSAP owns those transforms and reads a CSS translate as a pixel offset it never returns from. The card's overflow: hidden is what keeps the panels crisp as they travel. The .has-js pre-hides at the bottom of assets/style.css stop a frame of the finished card flashing before the entrance starts; leave them, they restore themselves under prefers-reduced-motion. The sheet breakpoint is 640px in both the CSS and CONFIG.sheetBreakpoint in the script; change both together.

Triggers

All on the root element.

Attribute	Values	Default	What it does
data-trigger	space-separated list of exit, scroll, delay, manual	exit delay	Which rules may open the popup
data-delay	milliseconds	15000	Time after load for the delay rule
data-scroll	percentage of the page's scrollable height	50	Depth for the scroll rule
data-once	session, days:N, never	session	How long to remember that it was shown
data-storage-key	any string	exit-popup	The sessionStorage / localStorage key
data-cooldown-ms	milliseconds	800	Exit intent is ignored this long after load
data-touch-back	true	off	Touch fallback: opens on a fast scroll upward after a deep read

Exit intent is a mouseleave on document.documentElement with clientY <= 0, so it fires when the pointer heads for the tab bar or the address bar, not when it leaves sideways. It is listened for on fine pointers only.

Every automatic rule shows the popup at most once per page load, exit intent included, and nothing turns that off. A popup that reappears each time the pointer flicks to the top of the window, or each time the reader crosses the scroll depth again, reads as broken rather than persistent. data-once is about later visits, not this one. exitPopup.open() is unaffected and always opens, which is how the demo's button re-shows it.

On a phone there is no exit intent. The scroll and delay rules still work, and data-touch-back="true" adds a velocity rule: a scroll upward faster than 1.5px/ms, after the reader has been past 30% of the page, opens the popup. It is off by default because it is a heuristic; turn it on for pages long enough that a fast flick up means "back to the top and away".

manual lists nothing extra; it is there so a root with only your own trigger reads honestly. Any element carrying data-popup-open opens the popup on click, and so does window.exitPopup.open().

Keyboard & Accessibility

Key	What it does
Escape	Closes; focus returns to whatever had it before the popup opened
Tab / Shift+Tab	Cycles within the dialog while it is open and wraps at either end
Enter in the field	Submits the form

• Roles: role="dialog" with aria-modal="true", aria-labelledby pointing at the headline and aria-describedby at the body. The offer panel is aria-hidden. The email field has a real <label> (visually hidden in the demo).
• On open, focus moves to the email field with preventScroll, so the locked page never jumps to reach it. On close it goes back to the previously focused element.
• The backdrop click and both close controls dismiss the popup; the root is hidden when closed, so nothing invisible covers the page.
• Body scroll is locked while open, with the scrollbar's width added as right padding so the layout does not shift.
• After submit the button is aria-disabled rather than disabled, so focus stays inside the trap while the sent state shows.
• Under prefers-reduced-motion: reduce the dialog appears in its final state with a zero-duration fade and no blur ramp; every control still works.
• On coarse pointers the close button and the dismiss link grow to 44px targets.

How It Works

One gate for every trigger. fire(source) checks that the popup is armed, not already open and not already shown for the current session or window (sessionStorage for session, a timestamp in localStorage for days:N), then calls open(). Storage reads are wrapped so a private window that throws simply shows the popup.

The split entrance. open() un-hides the root, locks scroll and sets every start state with gsap.set (panels at xPercent -18 and +18 with opacity 0, headline words at yPercent 110 inside their masks, the button at scale 0.92). A timeline then fades the backdrop while a plain object tweens its blur radius from 0 to --backdrop-blur, writing backdrop-filter on every update; the panels meet on power4.out; the words rise with a 0.04s stagger; the body and field fade up; the button lands last. Below 640px the dialog rises as a sheet on yPercent instead of splitting.

Closing. A shorter timeline on power2.in fades the content, parts the panels by 6%, drops the card 24px while fading it and unwinds the blur. hidden goes back on the root in onComplete, and the transforms are reset to zero so the next open starts clean. Focus is handed back before the tween starts.

Submit. The form's default is prevented, popup:submit is dispatched with detail.email, the button's background tweens to --success while its two labels crossfade, and a 1.6s timer closes the dialog with reason submit.

Customisation

• --backdrop-blur on the theme block is the blur the ramp ends on; set it to 0px for no blur.
• Colours, radii, the shadow and the offer panel's fill are custom properties on each body[data-variant] block in assets/style.css; the table under Themes lists them.
• On phones --media-strip (default 108px) is the height of the offer strip; 0px removes it, and the strip drops the supporting note so the figure and caption sit on one line.
• Timings and eases are the gsap.to calls inside open() and close() in assets/script.js; the auto-close after submit is the 1600 in the submit handler.
• The touch-back thresholds (1.5px/ms, 30% depth) are the two numbers in the scroll handler.

Themes

Two themes, one design: light (the default) and dark, the same tokens re-valued. Set the attribute on <body> in the demo, or on whatever element owns the popup in your own page:

Code snippet omitted: it ships with the download.

Leaving the attribute off gives you light. The demo's toggle and the ?variant=dark URL parameter only set this attribute; neither is part of the component, and nothing in assets/script.js reads the theme name.

Every colour, radius, blur and shadow is a custom property on the two body[data-variant] blocks at the top of assets/style.css. To re-value them for your own brand, this is the whole list:

Token	What it paints
--ground, --ground-2, --raised, --hover	The page behind, the toolbar strip, the card, and hover states
--ink, --ink-2, --ink-3	Headline, body copy, labels and meta
--line, --line-strong	Hairlines and the input border
--accent, --accent-ink, --accent-wash	The submit button, its label, and the focus ring
--success, --success-ink	The button's sent state (read by the script with getComputedStyle)
--backdrop, --backdrop-blur	The dimming layer and the blur the ramp ends on
--field-bg, --field-border	The email field
--media-bg, --media-ink, --media-ink-soft, --media-ink-softer, --media-line	The offer panel
--display-size, --display-weight, --display-tracking, --display-leading	The headline
--font, --radius, --radius-sm	The face and the radii

Both themes use one face, Inter, loaded in the demo from Google Fonts; point --font at whatever your page already loads and drop the link.

Add a third: copy either body[data-variant="..."] block, rename it and change the values. Set color-scheme to match the ground so native controls follow it. Nothing in assets/script.js changes, and no tween hard-codes a colour.

Requirements

• GSAP 3.12+ (the demo uses 3.15.0; core only, no plugins)
• No build step, no framework