Poppr Gooey Overlay Menu
What it does
Fullscreen overlay menu with a gooey liquid-curtain reveal: clicking the Menu/Close toggle morphs an SVG path's d attribute through a quadratic-Bezier bulge into a full-screen sheet (power4.in/out, reversed with power3 on close), while SplitText characters of each nav link snap in from x:750% with an elastic.out(1, 0.25) ease and staggered fades, and contact info items stagger up from y:100.
How it's built
| Category | menu |
|---|---|
| Tech | gsap |
| GSAP plugins | SplitText |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Fullscreen Overlay Menu — Gooey SVG-Path Liquid Curtain + Elastic SplitText Links
## Goal
Build a fixed navbar with a **Menu / Close** text toggle in the top-right corner that opens a **fullscreen overlay menu**. The signature effect: clicking the toggle drops a **gooey liquid "curtain"** down over the whole viewport by morphing a single SVG `<path>`'s `d` attribute through a quadratic-Bézier belly (it sags down like dripping paint before flattening to fill the screen), and as it lands the nav-link characters **snap in one-by-one from far off the right edge with a springy `elastic.out` ease** while the contact-info lines stagger up from below. Clicking **Close** reverses the whole thing: content fades, and the curtain retreats back up through an upward Bézier belly until it vanishes off the top. Entirely click-driven — no scroll, no autoplay.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the single GSAP plugin **`SplitText`**. No ScrollTrigger, no smooth-scroll library. Import as:
```js
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);
```
Wrap all code in a `DOMContentLoaded` listener.
## Layout / HTML
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.