Art Tech Overlay Navigation

by Vanguardia · motionprompts.dev

Clicking the burger button plays a paused GSAP timeline that reveals a fullscreen black overlay by animating the clip-path polygon of eight vertical blocks with a 0.075s stagger on a power3.inOut ease, then fades in the menu title and items with a staggered opacity tween; clicking again reverses the timeline to close.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.3–1s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap

Burger click plays one paused timeline: 8 full-height columns wipe top-to-bottom via clip-path polygon (1s, power3.inOut, 0.075s stagger), and 0.5s before that wipe finishes the index title + 4 menu items fade up in opacity (0.3s, power1.out default, 0.05s stagger). A second click reverses the same timeline. No scroll, no rAF, no physics.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev14,065 charsCustomize

# Art Tech Overlay Navigation

## Goal
Build a fullscreen overlay navigation for an editorial/tech studio site. The star effect: clicking a burger button plays…

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.