Minimal Push Overlay Menu

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

<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>
      <div class="menu-hamburger-icon"><span></span><span></span></div>
    </div>
  </div>
  <div class="menu-overlay">
    <div class="menu-overlay-content">
      <div class="menu-media-wrapper"><img src="<menu image>" alt="" /></div>
      <div class="menu-content-wrapper">
        <div class="menu-content-main">
          <div class="menu-col">
            <!-- 5 large links, each: <div class="menu-link"><a href="#">…</a></div> -->
            <!-- Index · Portfolio · Studio · Journal · Connect -->
          </div>
          <div class="menu-col">
            <!-- 3 small tags, each: <div class="menu-tag"><a href="#">…</a></div> -->
            <!-- Web Animations · Interactive Media · Motion Craft -->
          </div>
        </div>
        <div class="menu-footer">
          <div class="menu-col"><p>Toronto, Canada</p></div>
          <div class="menu-col"><p>+1 437 555 0199</p><p>hello@nullspace.studio</p></div>
        </div>
      </div>
    </div>
  </div>
</nav>

<div class="container">
  <section class="hero"><h1>Modern design system made that looks timeless</h1></section>
  <section class="banner"><img src="<banner image>" alt="" /></section>
  <section class="outro"><h1>Let’s build something quietly iconic</h1></section>
</div>

Styling

Palette (CSS variables)

• --bg: #171717 (page background), --fg: #fff, --menu-bg: #0f0f0f (overlay background), --menu-fg-secondary: #5f5f5f (muted grey for tags/footer/menu-bar), --hamburger-icon-border: rgba(255, 255, 255, 0.1).

Typography

• body { font-family: "PP Neue Montreal", "Inter", sans-serif; } — import PP Neue Montreal from https://fonts.cdnfonts.com/css/pp-neue-montreal and Inter from Google Fonts. Everything is weight 500.
• h1: 7.5rem, letter-spacing: -0.2rem, line-height: 1.
• p: 0.95rem. Base a: 1.5rem, color: var(--fg), no underline.
• .menu-link a: 3.5rem, line-height: 1.2. .menu-tag a and .menu-footer p: color var(--menu-fg-secondary).
• Global reset (* { margin:0; padding:0; box-sizing:border-box; }), img { width:100%; height:100%; object-fit: cover; }.

Page

• .container: position: relative; transform: translateY(0svh); background: var(--bg); color: var(--fg); — the initial translateY(0svh) matters because GSAP pushes it to 100svh.
• section: position: relative; width: 100vw; height: 100svh; padding: 2rem; display:flex; justify-content:center; align-items:center; overflow:hidden; z-index: -1; (the negative z-index keeps sections under the fixed nav). section h1 { width: 75%; }, section img { opacity: 0.5; }.

Fixed nav shell

• nav: position: fixed; inset-top-left; width:100vw; height:100svh; pointer-events: none; overflow: hidden; z-index: 2; — the nav itself is click-through; only its children re-enable pointer events.
• .menu-bar: position: fixed; top:0; left:0; width:100vw; padding:2rem; display:flex; justify-content: space-between; align-items:center; pointer-events: all; color: var(--menu-fg-secondary); z-index: 2;
• .menu-logo: 2rem × 2rem. .menu-toggle-btn: flex row, gap: 1rem, cursor: pointer.
• .menu-toggle-label: overflow: hidden (this clips the label when GSAP slides the <p> up). Its p: position: relative; transform: translateY(0%); will-change: transform;.

Hamburger icon (pure CSS morph)

• .menu-hamburger-icon: position: relative; width:3rem; height:3rem; circular (border-radius: 100%), border: 1px solid var(--hamburger-icon-border), flex column centered.
• Each span: position:absolute; width:15px; height:1.25px; background: var(--fg); transform-origin: center; will-change: transform; and — key — transition: all 0.75s cubic-bezier(0.87, 0, 0.13, 1); (the same curve as the GSAP "hop" ease).
• Resting state: span 1 translateY(-3px), span 2 translateY(3px) (two parallel lines).
• .menu-hamburger-icon.active state: span 1 translateY(0) rotate(45deg) scaleX(1.05), span 2 translateY(0) rotate(-45deg) scaleX(1.05) — the lines merge into an X. JS only toggles the active class; CSS animates it.

Overlay

• .menu-overlay and .menu-overlay-content: both position: fixed; top:0; left:0; width:100vw; height:100svh; color: var(--fg); overflow: hidden; z-index: 1;.
• .menu-overlay: background: var(--menu-bg); with initial clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%) (a zero-height strip pinned to the top edge — fully hidden) and will-change: clip-path.
• .menu-overlay-content: display: flex; transform: translateY(-50%); will-change: transform; pointer-events: all; — it starts shifted up half a screen; GSAP parses that as yPercent: -50.
• .menu-media-wrapper: flex: 2; opacity: 0; will-change: opacity; and its img { opacity: 0.25; } (a dim, moody panel).
• .menu-content-wrapper: flex: 3; position: relative; display: flex;.
• .menu-content-main: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. .menu-footer: margin: 0 auto;. Both: width: 75%; padding: 2rem; display: flex; align-items: flex-end; gap: 2rem;.
• .menu-col: flex column, gap: 0.5rem; inside .menu-content-main / .menu-footer the first col gets flex: 3, the second flex: 2.
• .line (the class SplitText assigns to each line): position: relative; will-change: transform;.

GSAP effect (exhaustive)

Setup

1. gsap.registerPlugin(CustomEase, SplitText); then CustomEase.create("hop", ".87,0,.13,1") — this bezier is the signature ease used by every structural tween.
2. Lenis smooth scroll: const lenis = new Lenis() driven by a requestAnimationFrame loop calling lenis.raf(time).
3. SplitText prep — for every .menu-col container (there are 4: links col, tags col, and the 2 footer cols), select all its a and p elements and split each element with SplitText.create(element, { type: "lines", mask: "lines", linesClass: "line" }) (the mask: "lines" option wraps every line in its own overflow-clipping mask wrapper). Keep the splits grouped per container in an array of arrays (splitTextByContainer). Immediately hide every line: gsap.set(split.lines, { y: "-110%" }) — each line waits above its mask.

State guards — isMenuOpen and isAnimating booleans. The toggle click handler returns early while isAnimating is true, so the animation can never be interrupted mid-flight.

OPEN timeline (click while closed): set isAnimating = true, call lenis.stop() (page scroll is frozen while the menu is open), then build one gsap.timeline() where the first five tweens all start together at position "<" (time 0):

1. .menu-toggle-label p → y: "-110%", duration: 1, ease: "hop" — the word "Menu" slides up out of its overflow-hidden wrapper and disappears.
2. .container → y: "100svh", duration: 1, ease: "hop" — the whole page is pushed down one full viewport (the "push-over").
3. .menu-overlay → clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 1, ease: "hop" — the overlay's bottom edge sweeps from the top of the screen down to the bottom, revealing the dark menu in a top-anchored wipe that moves in lockstep with the page being pushed down.
4. .menu-overlay-content → yPercent: 0, duration: 1, ease: "hop" — the content rides up from its initial translateY(-50%) to its natural position (a parallax counter-movement against the wipe).
5. .menu-media-wrapper → opacity: 1, duration: 0.75, ease: "power2.out", delay: 0.5, positioned at "<" — the side image fades in during the second half of the wipe (effective window ≈ 0.5s→1.25s).

Line reveals — after those five, loop over splitTextByContainer; for each container, flatten its splits into one array of line elements (containerSplits.flatMap(split => split.lines)) and add:

• tl.to(copyLines, { y: "0%", duration: 2, ease: "hop", stagger: -0.075 }, -0.15)
• Details that matter: stagger: -0.075 is negative, so within each group the last line starts first and the reveal runs bottom-up, 0.075s apart. The position parameter -0.15 means "insert 0.15s before the current end of the timeline" — and since each added tween extends the timeline's end (its span is 2 + 0.075 × (lines − 1) seconds), the four container groups chain into a cascade, each group beginning 0.15s before the previous group's tween finishes: group 1 (5 link lines) starts at ≈1.1s, group 2 (3 tag lines) at ≈3.25s, group 3 (1 footer line) at ≈5.25s, group 4 (2 footer lines) at ≈7.1s. Do NOT insert them all at the same time — add them sequentially in a loop with position -0.15 so this cascade emerges naturally.

Also on open: hamburgerIcon.classList.add("active") (CSS morphs the icon to an X over 0.75s), and finish with tl.call(() => { isAnimating = false; }). Set isMenuOpen = true.

CLOSE timeline (click while open): set isAnimating = true, remove the active class from the hamburger, then one timeline with five tweens all starting together (first at default position, the rest at "<"), all duration: 1, ease: "hop":

1. .container → y: "0svh" — the page slides back up.
2. .menu-overlay → clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" — the overlay collapses back to a zero-height strip at the top (bottom edge sweeps upward).
3. .menu-overlay-content → yPercent: -50 — the content slides back up behind the wipe.
4. .menu-toggle-label p → y: "0%" — the word "Menu" slides back down into view.
5. All .menu-col containers → opacity: 0.25 — the menu copy dims as it exits.

End the close timeline with a tl.call() that resets everything instantly for the next open: gsap.set all split lines back to y: "-110%", gsap.set the .menu-col containers back to opacity: 1, gsap.set(.menu-media-wrapper, { opacity: 0 }), then isAnimating = false and lenis.start(). Set isMenuOpen = false.

Assets / images

3 images, described by role:

1. Logo — a small square (1:1) abstract studio logo mark on transparent background (PNG), rendered at 2rem in the top-left of the menu bar.
2. Menu overlay media — one moody, dark editorial photograph (roughly portrait/full-height crop; it fills the left 2/5 of the overlay at full viewport height, object-fit: cover) shown at 25% opacity as an ambient panel inside the open menu.
3. Page banner — one large atmospheric photograph filling the middle full-screen section (100vw × 100svh, object-fit: cover) at 50% opacity behind the dark background.

No real brand names — use the neutral fictional studio contact shown in the HTML above.

Behavior notes

• The open/close animations are click-triggered only; isAnimating locks out clicks mid-animation.
• Lenis smooth scroll runs on the page and is stopped while the menu is open, restarted on close.
• The page sections use z-index: -1 so the fixed nav/overlay always sit above them; the nav shell is pointer-events: none with pointer-events: all re-enabled only on the menu bar and the overlay content.
• Responsive at max-width: 1000px: h1 drops to 3rem (letter-spacing -0.05rem, full width), the media wrapper is hidden (display: none), .menu-content-main and .menu-footer go full width, .menu-content-main becomes a column (align-items: flex-start; gap: 5rem), .menu-link a drops to 3rem and .menu-tag a to 1.25rem.
• Use svh units throughout (heights and the container push) for correct mobile viewport behavior.