Minimal Push Overlay Menu
What it does
A fullscreen overlay menu triggered by clicking the hamburger toggle: a GSAP timeline with a custom 'hop' ease pushes the page content down 100svh while the dark overlay expands via an animated clip-path polygon, its inner content slides up from -50% to 0, the media image fades in, and SplitText line-masked links stagger in with a negative stagger. Clicking again reverses the timeline.
How it's built
| Category | menu |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | CustomEase, SplitText |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Minimal Push Overlay Menu
## Goal
Build a dark, minimal one-page site with a fixed menu bar whose star effect is a **fullscreen "push-over" overlay menu**: clicking the circular hamburger toggle runs a single GSAP timeline (custom "hop" ease) that simultaneously **pushes the entire page content down by 100svh**, **wipes the dark overlay open top-to-bottom via an animated `clip-path` polygon**, slides the overlay's inner content up from `-50%` to `0`, fades in a side media image, and reveals every menu link/tag/footer line with **SplitText line-masked reveals in reverse stagger**. Clicking again plays the mirrored closing timeline and the page slides back up.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`CustomEase`** and **`SplitText`**, and **`lenis`** for smooth scrolling. All logic in one `script.js` (`<script type="module">`), one `styles.css`, one `index.html`. Register plugins with `gsap.registerPlugin(CustomEase, SplitText)` and run everything inside a `DOMContentLoaded` listener.
## Layout / HTML
```html
<nav>
<div class="menu-bar">
<div class="menu-logo"><a href="#"><img src="<logo>" alt="" /></a></div>
<div class="menu-toggle-btn">
<div class="menu-toggle-label"><p>Menu</p></div>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.