Fullscreen Menu with Staggered Links
A burger morphs into a cross while a full-screen curtain drops via clip-path; five giant serif links rise from masks with a stagger, a contact column fades in and a background index number follows the hovered link. Close simply reverses the timeline.
- Navigation
- gsap
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1432 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Mega Menu Reveal
Hover or focus "Products" and a full-width panel unfolds from under the bar with a clip-path curtain; three columns of links rise in with a tight stagger and a featured card slides in from the right. Keyboard-complete, and an accordion on phones.
- gsap
light Sidebar Drawer
An off-canvas drawer slides in from the left or right over a fading scrim while its links stagger in; the page behind is made inert, focus is trapped, Escape closes, and a swipe (GSAP Draggable) drags it shut with the scrim following your finger.
- gsap
light Menu Icon Morph
A radio-station header whose burger morphs into a close icon and opens a menu, above four large specimens of the same three bars: cross, two-step collapse, arrow and spin. Outer strokes travel ±6px to the centre and rotate ±45° while the middle one vanishes.
- gsap
light Radial Menu Burst
A floating action button bursts six actions along a 160° arc: each flies from the hub to its polar position (back.out, 0.04s stagger) as the plus turns 45° and a hairline track draws from the middle out. Labels slide out on hover/focus.
- gsap
- svg