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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the curtain-layering math on your own. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the two half-panels are sized just over 50% wide to avoid a seam, or how sharing a single scrubbed timeline keeps the panel parting, the center scale-up, and the heading rise perfectly synchronized in both scroll directions. The same assistant can help optimize it — asking whether xPercent is really necessary over left/right for this specific layout, or whether the +=120% scroll distance feels right compared to a shorter or longer reveal window. It's also useful for extending the effect: ask it to make the curtains part vertically instead of horizontally, add a subtle skew to the panels as they slide for extra drama, or trigger a secondary animation on the revealed content only once the panels have fully cleared the screen. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "scroll split panels" curtain-reveal effect in plain HTML, CSS, and JavaScript using GSAP with its ScrollTrigger plugin (load both from a CDN).

Requirements:
- A pinned stage containing three layered pieces: a centered content block placed behind everything with a low z-index, and two cover panels — a left half and a right half — placed above it with a higher z-index, each panel sized to just over 50% of the stage width so they overlap slightly in the middle with no visible seam at rest.
- Register a single GSAP timeline on one ScrollTrigger with pin: true and scrub: true, running for a scroll distance of roughly 120% of the viewport height.
- On that timeline, starting at the same position (time 0), tween the left panel's xPercent to -100 (sliding it fully off the left edge) and the right panel's xPercent to +100 (sliding it fully off the right edge), both using ease none so their travel is locked directly to scroll position with no rubber-banding.
- On the same timeline position, animate the previously-hidden center content's scale and opacity from a slightly shrunken, dimmed starting state (set once at load, not as part of the scrubbed tween) up to full scale and full opacity, and animate its heading rising up from a vertical offset — so the reveal feels like content settling into focus as the curtains part, not a hard cut.
- Use xPercent instead of animating the left/right CSS positioning properties, so the panel movement is GPU-composited and never triggers layout reflow.
- Confirm scrolling back up smoothly closes the curtains and re-dims the center content, purely because everything lives on one scrubbed timeline — no separate reverse-specific code.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Add the GSAP CDNsInclude gsap and ScrollTrigger from the CDN panel.
2
Paste HTML, CSS, and JSTwo cover panels hide a center message.
3
Scroll downThe panels slide apart like curtains.
4
See the revealThe center settles into full focus.
5
Scroll back upThe curtains close — motion is scrubbed.
6
Use real mediaSwap the gradients or center for images.

Real-world uses

Common Use Cases

Big reveals

Pair with a scroll curtain reveal.

Product launches

Uncover a scroll zoom hero.

Editorial

Frame a scroll image mask reveal.

Brand intros

Open onto a minimal hero.

Galleries

Reveal a scroll gallery pin.

Stories

Punctuate a scroll pin story.

Related: Staggered Reveal on Scroll — IntersectionObserver, One Timer

See the Staggered Reveal on Scroll — IntersectionObserver, One Timer for a related scroll pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The stage layers a centered content block at z-index 0 beneath two absolutely-positioned halves at z-index 2 that cover it. Each half is just over 50% wide so they meet seamlessly at rest. Because the halves sit above the content, the center stays hidden until the panels slide out of the way.

A GSAP timeline tied to a pinned ScrollTrigger with scrub: true slides the left half to xPercent -100 and the right half to xPercent 100 from position 0, moving each fully off its edge. Because it is scrubbed, the panels' positions follow the scrollbar and reverse when you scroll up, closing the curtains.

The center starts slightly scaled down and dim via gsap.set, then animates to full size and opacity across the same scroll while its heading rises from an offset. So it eases into focus as the panels retreat rather than snapping into view, which makes the reveal feel choreographed with the parting.

xPercent is a transform, so the slide is composited on the GPU and never triggers layout reflow, even at full-screen panel sizes. Animating left would reflow each frame and stutter. Pinning holds the stage so the parting plays over a controlled distance, and ease: none keeps the travel locked to scroll.

In a mount effect, register ScrollTrigger and build the pinned, scrubbed timeline scoped to refs for the stage and panels, with a gsap.set for the center's initial state. Return a cleanup that reverts the GSAP context so the pin and triggers are torn down on unmount. The layered CSS ports unchanged.

Loading…