Fullscreen Portfolio Menu

by Vanguardia · motionprompts.dev

A fullscreen overlay navigation that toggles open on clicking the burger button: a GSAP timeline sweeps a clip-path polygon over the whole viewport on a power4.inOut ease, then staggers the oversized menu items up from a y offset with power4.out, grows a CSSRulePlugin-animated underline on the active item, and fades the social sub-nav up into place. Clicking again reverses the same timeline.

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

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power4
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, CSSRulePlugin

clip-path overlay sweep (top edge expanding downward, power4.inOut, 1.5s) with a 0.2s-staggered masked y:225->0 menu rise overlapping 1s early, then an underline width grow and sub-nav fade

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev17,076 charsCustomize

# Fullscreen Portfolio Menu — Clip-Path Overlay with Staggered Giant Links

## Goal

Build a fullscreen overlay navigation for an editorial portfolio site. A bu…

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.