Pinned Split-Screen Mask Reveal

Pinned Split-Screen Mask Reveal is a high-performance scroll-driven layout. It synchronizes fixed image stacks with flowing text content. This element creates a cinematic transition where images are “unmasked” as the user progresses through sections. It is designed to bridge the gap between static information and immersive visual storytelling.

Specs

• Libraries: GSAP (Animation), ScrollTrigger (Pinning), Lenis (Smooth Scroll).
• Performance: GPU-accelerated transitions.
• Weight: ~50KB (including libraries).
• Support: Full mobile responsiveness with layout interleaving.

Anatomy

The component is structured as a two-column system that reorganizes itself based on viewport size.

• HTML (Skeleton): A main .arch container holds .arch__left (info) and .arch__right (images). Images are layered using z-index via data-attributes to ensure correct stacking order during the reveal.
• CSS (Skin): Flexbox handles the split. On desktop, the right column is fixed height (100vh). On mobile, the layout switches to a single column where images and text alternate using the CSS order property.
• JS (Nervous System): Lenis handles the smooth inertia. GSAP orchestrates the timeline, pinning the right container while simultaneously animating clip-path on the images.

Logic

The core intelligence lies in the clip-path manipulation. Unlike simple opacity fades, this “Glyph-logic” uses geometric masking to transition between states.

.to(currentImage, {
  clipPath: "inset(0px 0px 100%)",
  objectPosition: "0px 60%",
  duration: 1.5,
  ease: "none"
})

By pushing the inset value to 100% from the bottom, the image effectively retracts upward, revealing the next layer beneath it. This is combined with subtle object-position shifts to create a secondary parallax effect within the frame.

Feel

The experience is fluid and weighted. Every pixel of scroll translates into a precise percentage of the mask reveal. There is no disconnect between the user’s hand and the screen movement. The background color transitions are timed to complete just as the new image becomes fully visible, providing a holistic environmental shift.