Smooth GSAP Slide-Out Sidebar Navigation

This is a full-viewport e-commerce layout featuring a GSAP-powered off-canvas sidebar navigation. It resolves the conflict between showcasing high-density visual content and maintaining a complex navigation structure. The layout hides primary links off-screen, revealing them through a staggered, hardware-accelerated slide sequence only when requested.

Specs

• Weight: ~85 KB (Includes GSAP core and CSSRulePlugin).
• Performance: High. Uses x and xPercent transforms to ensure GPU acceleration, avoiding layout thrashing during animation.
• Theming / Customization: Centralized via CSS custom properties (:root). Changing --color-primary updates the entire UI schema.
• Responsiveness: Fluid. Built on CSS Grid with dynamic row/column calculations across three major breakpoints down to 480px.
• Graceful Degradation: [!] If JavaScript fails, the active navigation remains hidden (hidden attribute), but the layout structure remains intact.

Anatomy

The structure separates layout calculation from animation logic.

• HTML: A semantic .wrapper containing <header>, <article>, <aside>, and <figure>. Extensive use of aria-* attributes ensures screen reader compatibility.
• SCSS: Uses modern CSS Grid for macro-layout. It relies on a 12-column grid system (repeat(11, 1fr) plus a fixed header width) that reconfigures entirely at media queries.
• JS: Functions as the state manager and orchestrator. It listens for interaction (clicks, Esc key) and triggers predefined GSAP timeline sequences.

Logic

The elegance of this snippet lies in how it handles dynamic widths during the animation using a calculated function rather than hardcoded values.

// Calculate final -header--normal- position based on header width
function headerPosition(el) {
    const travelDistance = 0.8;
    let width = window.getComputedStyle(el).width,
        xValue = Math.round(parseInt(width, 10) * travelDistance);

    return xValue;
}

// Inside the timeline:
.to(headerDefault, { duration: 1.4, x: () => headerPosition(header) }, "slideIn")

By passing a function () => headerPosition(header) to GSAP, the animation recalculates the correct x translation in real-time based on the DOM’s computed width. This ensures the animation remains perfectly aligned regardless of the viewport size or CSS breakpoint changes.

Feel

Mechanical and deliberate. The sidebar doesn’t just appear; it unfolds. The staggered timing ("slideIn+=.3") makes the text and brandmark trail slightly behind the main panel, creating a physical sense of weight and inertia. Pressing Esc to close makes the interaction feel native and completely predictable.