Meristem Overlay Menu

by Vanguardia · motionprompts.dev

Fullscreen overlay menu toggled by a hamburger button: a paused GSAP timeline scales four stacked green background layers in from the top (scaleY 0 to 1, 0.1s stagger, power3.inOut), then wipes the nav panel in with a clip-path polygon reveal while SplitText line-masked links slide up from y:100% with a 0.05s stagger (power3.out). Clicking again reverses the timeline and resets the link lines on close.

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

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, SplitText

click-toggled stack of 4 staggered scaleY curtains (0.1 stagger, power3.inOut, top-origin except a bottom-origin mint sliver) overlapped -=0.6 by a top-down clip-path reveal of .nav-items, then masked link lines rising y 100%→0% after a 0.85s delay with 0.05 stagger; reverse plays the whole thing backwards and resets lines to y:100%

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev20,646 chars

# Stacked Layers Overlay Menu — Curtain-Drop Background Stack + Clip-Path Panel Wipe + Masked Line Reveal

## Goal
Build a fixed top navbar with a hamburger tog…

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.