ExoApe-Inspired Overlay Menu

by Vanguardia · motionprompts.dev

A fullscreen overlay navigation menu inspired by ExoApe. Clicking the Menu toggle drives a synchronized GSAP timeline: the page container rotates/scales/translates away (power4.inOut), the overlay's clip-path polygon skews open, the menu content settles from a rotated-scaled state, and the links stagger up from below (power3.out). Hovering a link swaps a stacked preview image in with a scale/rotate fade (power2.out).

Type: Web motion
Framework: GSAP
Trigger: hover
Duration: 0.3–1.25s

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

clip-path wipe overlay: the page container swings away larger (rotate 10°, x300 y450, scale 1.5, origin right top) while the menu content settles in from scale 1.5 / rotate -15° / opacity 0.25 — all three 1.25s power4.inOut — then links rise from translateY(120%) staggered 0.1s with power3.out; hover swaps a stacked preview image in from scale 1.25 / rotate 10° over 0.75s

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,703 charsCustomize

# Fullscreen Overlay Menu with Skewed Clip-Path Reveal & Hover Image Preview

## Goal

Build a fullscreen overlay navigation menu (ExoApe-style). Clicking a "Me…

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.