Audemars Piguet Overlay Menu
What it does
Fullscreen overlay menu opened from a hamburger toggle: two background halves pre-rotated 180deg with scale(2) sweep in like closing doors on a custom cubic-bezier ease while the bars morph into an X, then SplitText-masked menu links and footer lines slide up with staggered power3.out reveals. Clicking the toggle again reverses the same paused timeline to close.
How it's built
| Category | menu |
|---|---|
| Tech | gsap |
| GSAP plugins | SplitText, CustomEase |
| Complexity | section |
| Performance cost | medium |
| 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 — Rotating Background Doors + Masked Line Reveal
## Goal
Build a fixed top navbar with a circular hamburger toggle that opens a **fullscreen overlay menu**. The signature effect: two full-height background halves, each pre-rotated 180° and scaled ×2 around their inner edge, **rotate back to 0° so they sweep in like two closing blades/doors** on a custom cubic-bezier ease, while the hamburger bars **morph into an X** at the same time; then two columns of menu links plus a footer **reveal line-by-line from a mask with a staggered `power3.out` slide-up**. It is a single **paused GSAP timeline**: clicking the toggle `.play()`s it to open, clicking again `.reverse()`s the exact same timeline to close.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`SplitText`** and **`CustomEase`**. No smooth-scroll library, no ScrollTrigger — the whole thing is click-driven. Import as:
```js
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
import { CustomEase } from "gsap/CustomEase";
gsap.registerPlugin(SplitText, CustomEase);
```
## 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.