Rejoice Fullscreen Overlay Menu

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.25–2s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power2
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, phosphor-icons

Paused, reversible GSAP timeline: a top-edge clip-path wipe opens a full-viewport overlay (1s power2.out) while, from the same t=0, links stagger up 60px at 0.05s each (0.75s power1.inOut), a video preview grows 0 -> 200px (1s power2.out) and a footer divider draws 0% -> 100% width (2s power4.out, the tail that sets the 2s total). Close plays the exact same curves backwards.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,410 charsCustomize

# 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…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.