Rejoice Fullscreen Overlay Menu
What it does
A fullscreen overlay navigation menu that opens on clicking the 'Menu' button and closes on 'Close'. A single paused GSAP timeline plays/reverses: it animates the overlay clip-path open, staggers the nav links and CTA up with a fade, grows the video preview thumbnail and draws the footer divider from 0 to 100% width.
How it's built
| Category | menu |
|---|---|
| Tech | gsap |
| Complexity | page |
| 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.
# Clip-Path Drop-Down Overlay Menu — Top Panel Wipe + Staggered Link Reveal + Growing Reel Thumbnail + Divider Line Draw
## Goal
Build a page with a fixed top navbar (logo + a "Menu" text button) sitting over a full-bleed photographic background. Clicking **Menu** opens a lime-green **overlay panel that drops down from the top edge** via an animated `clip-path`, and clicking **Close** reverses it. The signature effect is a single **paused, reversible GSAP timeline** whose four tweens all fire together at time 0: (1) the overlay's `clip-path` polygon expands from a zero-height top strip to the full panel (wipes down from top); (2) the nav links + CTA button **fade up from below** with a small stagger; (3) the reel thumbnail **grows in height** from 0 to 200px; and (4) the footer divider **draws itself** from 0% to 100% width. Open plays the timeline forward, Close plays the exact same timeline in reverse. It is entirely click-driven — no scroll, no autoplay.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`gsap`** (npm) only — **no GSAP plugins**, no ScrollTrigger, no smooth-scroll library. Import as:
```js
import gsap from "gsap";
```
Icons: **Phosphor Icons (web)** — see **Icons** below for the exact version and where to get it. Two filled glyphs: a `play` inside `.video-preview` (`<i class="ph-fill ph-play"></i>`) and a `play-circle` in `.video-details` (`<i class="ph-fill ph-play-circle"></i>`). If unavailable, any small play-circle icon substitutes.
## Layout / HTML
```
.container (position: relative, full width/height)
…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.