Fold

Sections that fold into each other as you scroll. The direct children are the panels; each one takes a mode, from its data-fold attribute or the mode prop:

• pin holds the panel while the next scrolls over it. With scale, rotation or an overlay it shrinks, tilts and dims underneath; with a stackOffset the panels stack like cards.
• parallax moves the panel down while the next enters.
• reveal uncovers the panel from behind the one before it.

data-fold-y, data-fold-opacity and data-fold-overlay tune one panel. The panels must be adjacent siblings in normal flow: reveal on the first and pin or parallax on the last do nothing. Below 768px a parallax simplifies to a pin.

Lineage: darkroom.engineering's satus Fold, rewritten on GSAP ScrollTrigger so it composes with the page's other triggers. The direction page is the live use: the hero parallaxes under chapter two, chapters two and three pin while the next wipes across, and the voice cards are a pinned stack.

Examples

The three modes

Stacked cards

Props

• as: div, main or section (div)
• mode: mode for every child; unset, only tagged children fold
• scale: how much a pinned panel shrinks while the next lands, 0 to 1 (0)
• rotation: degrees a pinned panel tilts, alternating sides (0)
• overlay: how dark a covered panel gets, 0 to 1 (0)
• overlayColor (black)
• y: parallax distance in pixels (400; reveal defaults to 0)
• offsetTop: pixels from the top where the first pinned panel rests (0)
• stackOffset: pixels each pinned panel rests below the one before (0)
• scrollsItself: when the element scrolls rather than the window
• mobile: { breakpoint, strategy }, strategy simplify | disable | same

Reduced motion renders the panels in plain flow.