Scroll Split Panels — Free GSAP ScrollTrigger Curtain Reveal

Scroll split panels is the reveal where two halves of a cover slide apart — left goes left, right goes right — as you scroll, uncovering a headline or media sitting behind them like curtains opening on a stage. This snippet builds it with GSAP and ScrollTrigger (from a CDN), plus plain HTML and CSS.

Two halves over a hidden center

The stage layers three pieces: a centered content block at z-index: 0 and two absolutely-positioned halves at z-index: 2 that cover it. Each half is just over 50% wide so they meet with no seam down the middle at rest. Because the halves sit above the content, the center is hidden until they move — the whole effect is just sliding those two covers out of the way.

Pinned, scrubbed timeline

A GSAP timeline tied to a ScrollTrigger pins the stage (pin: true) and runs for end: '+=120%' with scrub: true, so the panels' positions follow the scrollbar. From position 0, the left half tweens xPercent: -100 and the right half xPercent: 100, sliding each fully off its own edge, while the center scales up and brightens. Sharing one timeline keeps the parting symmetrical and reversible — scroll back and the curtains close.

The center settles as it's revealed

The center starts slightly scaled down and dimmed (gsap.set to scale: 0.9, opacity: 0.4) and animates to full size and opacity over the same scroll, with its heading rising from an offset. So the revealed content doesn't just appear — it eases into focus as the panels retreat, which makes the reveal feel composed rather than a hard uncover.

Why xPercent and a pin

Using xPercent (a transform) rather than left means the slide is GPU-composited and never reflows, even at full screen size. Pinning holds the stage still so the parting plays over a controlled scroll distance instead of scrolling away; end: '+=120%' gives it a little over one screen to complete, which reads as deliberate.

Linear and reversible

ease: 'none' on the panel tweens locks their travel to the scroll position so there's no rubber-banding, and because everything lives on one scrubbed timeline the entire effect runs backward perfectly when you scroll up — the panels glide back together and the center dims again.

Customizing it

Swap the panel gradients for images, change the slide direction (vertical curtains with yPercent), adjust the reveal distance via end, or put real media behind the panels. Pair it with a scroll curtain reveal, a scroll image mask, or a scroll zoom hero.