Scroll Curtain Reveal — Free GSAP ScrollTrigger Snippet

The scroll curtain reveal is the transition where a full-screen panel slides up and off the top of the viewport as you scroll, drawing back like a theater curtain to reveal the content waiting behind it — a dramatic way to move between sections. This snippet builds it with GSAP and ScrollTrigger (from a CDN), plus plain HTML and CSS.

A covering panel over hidden content

The stage layers two pieces in the same box: a background section at the base and a full-cover .cr-curtain panel above it at z-index: 2. At rest the curtain hides the section completely. The entire effect is simply sliding that one panel up out of the way — the reveal is what's already sitting underneath.

Pinned, scrubbed lift

A GSAP timeline tied to a pinned ScrollTrigger (scrub: true, end: '+=130%') drives the curtain. From position 0, the curtain tweens yPercent: -100, moving it entirely off the top edge, while its inner label fades and lifts slightly ahead of the panel so the text doesn't ride awkwardly to the very top. Because it's pinned and scrubbed, the curtain rises exactly as far as you scroll and lowers again if you scroll back — a fully reversible draw.

The content settles as it's revealed

The background heading starts pushed down and dim, then eases into place over the same scroll (from at timeline position 0.2). So as the curtain lifts, the revealed section doesn't just sit there statically — its headline rises into focus, making the reveal feel like the content is arriving rather than being uncovered by a moving shutter. Layering the curtain exit and the content entrance on one timeline keeps them synchronized.

Why yPercent and a pin

yPercent: -100 is a transform, so the curtain slides on the GPU without reflowing the page, and transform-origin: top keeps the motion anchored upward. Pinning the stage means the lift plays over a deliberate scroll distance instead of the panel simply scrolling away with the page — that control is what makes it read as a designed transition rather than normal scrolling.

Linear and contained

ease: 'none' on the curtain and content tweens locks them to the scrollbar with no rubber-banding, and overflow: hidden on the stage clips the curtain as it exits so nothing spills above the section. The whole thing runs backward perfectly on scroll-up.

Customizing it

Change the lift direction (curtain down with yPercent: 100, or sideways), the reveal distance via end, the panel styling, or what's behind it — an image, a hero, a video. Pair it with scroll split panels, a scroll image mask, or a scroll zoom hero.