Smooth Scroll Stacking Accordion

This is a Smooth Scroll Stacking Accordion. It replaces standard click-to-open accordions with a scroll-driven interaction. Its function is to pin a section of content and compress multiple information cards into a stacked deck as the user scrolls down the page.

Specs

• Weight: ~120 KB (Dependencies: GSAP Core, ScrollTrigger, ScrollSmoother).
• Performance: High. GSAP handles the interpolated transforms and opacity shifts without triggering heavy layout recalculations after the initial pin.
• Theming / Customization: Card backgrounds use CSS linear gradients. Layout geometry relies entirely on max() functions and viewport units (vh/vw) for fluid scaling.
• Responsiveness: Mobile-ready out of the box. Font sizes and paddings scale seamlessly to smaller viewports via pure CSS mathematical functions.
• Graceful Degradation: Fails safe. If JavaScript is disabled, the cards remain static and fully expanded in a vertical column. The content remains 100% accessible to read, just without the folding animation.

Anatomy

The structure is optimized for GSAP’s scroll manipulation logic.

• HTML (The Skeleton): Utilizes a required wrapper structure (#wrapper > #content) for ScrollSmoother. The .accordions container holds .accordion cards, each divided into .title and .text nodes.
• CSS (The Skin): Minimal structural CSS. Hides the native scrollbar (scroll-behavior: none) and uses flexbox for central alignment. The aesthetics are purely driven by saturated linear gradients and soft box shadows.
• JS (The Nervous System): Initializes the ScrollSmoother physics and registers a GSAP timeline. It pins the .accordions container to the top of the viewport and scrubs the animation progress proportionally to the user’s scroll depth.

Logic

The core visual mechanism relies on a GSAP ScrollTrigger scrubbing a staggered timeline. This is the Glyph-logic:

tl.to('.accordion .text', {
  height: 0,
  paddingBottom: 0,
  opacity: 0,
  stagger: .5,
})
tl.to('.accordion', {
  marginBottom: -15,
  stagger: .5,
}, '<')

The position parameter < is crucial. It synchronizes the height compression of the text with the negative margin shift of the container. As the user scrolls, the active text area collapses to zero height, while the subsequent card is simultaneously pulled upward by 15px. The stagger: .5 ensures this sequence cascades down the deck card by card, creating the illusion of physical stacking.

Feel

Cinematic and deliberate. The inertia injected by ScrollSmoother adds physical weight to the scroll wheel. The cards fold into each other with a satisfying, magnetic snap. It turns a mundane reading sequence into a tactile, spatial progression.