Staggered Panel Curtain Menu

The Staggered Panel Curtain Menu is a creative full-screen navigation concept that breaks the traditional “fade-in” mold. It uses a series of vertical panels that drop down at slightly different intervals, creating a sophisticated “curtain” reveal. This effect is achieved by combining the precision of GSAP with the flexibility of CSS clip-path and variable fonts, making it an ideal choice for high-end creative portfolios or modern agency websites.

Core Technique

The backbone of this animation is the clip-path: polygon() property applied to the .header__nav container. Instead of animating a simple height property, the code defines four distinct vertical sections (0-25%, 25-50%, 50-75%, 75-100%) within a single polygon. Each section’s bottom coordinate is controlled by a unique CSS variable (--panel-bottom-1 through 4).

GSAP’s role is to animate these CSS variables sequentially. By targeting the custom properties instead of the clip-path string directly, we keep the JavaScript clean and let the browser handle the heavy lifting of path rendering. Additionally, the menu items use variable fonts (font-variation-settings), allowing for a smooth weight transition on hover.

Customization

You can easily adjust the number of panels or the speed of the reveal by modifying the GSAP timeline and the clip-path coordinates.

.header__nav {
  /* Default panel positions */
  --panel-bottom-1: 0%;
  --panel-bottom-2: 0%;
  /* ... */
  
  /* Update this polygon to add more or change widths */
  clip-path: polygon(0 0, 0 var(--panel-bottom-1), 25% var(--panel-bottom-1), 25% 0, ...);
}

In the JavaScript, you can control the stagger delay by changing the offset values (the last parameter in .to()):

gsap.timeline({})
  .to(headerNav, 0.4, { "--panel-bottom-1": amount, ease: "Power1.easeOut" })
  .to(headerNav, 0.4, { "--panel-bottom-2": amount }, 0.1) // 0.1s delay
  .to(headerNav, 0.4, { "--panel-bottom-3": amount }, 0.2); // 0.2s delay

Tips

1. Hardware Acceleration: clip-path is generally well-optimized, but animating many complex polygons can be taxing. By using CSS variables to drive the coordinates, the browser can optimize the transition more effectively than if you were recalculating the entire string in JS.

2. Focus Management: When creating full-screen menus like this, remember to implement a “focus trap.” Keyboard users should not be able to tab into the content behind the menu while it is open. You can toggle aria-hidden on your main content section when the menu opens.