Smooth Parallax Image Scroll Gallery

This is a Smooth Parallax Image Scroll Gallery. It translates vertical scroll progression into independent Y-axis movement for masked images. Its function is to create a sense of depth and momentum, elevating standard vertical feeds into immersive visual narratives.

Specs

• Weight: ~75 KB (Dependencies: GSAP Core, ScrollTrigger, Lenis).
• Performance: High. Relies purely on GPU-accelerated transform: translateY() calculations synchronized with the browser’s render cycle.
• Theming / Customization: Dimensions are strictly controlled by CSS clamp logic (min(80vw, 900px)).
• Responsiveness: Fluid scaling via viewport units (vw, dvh).
• Graceful Degradation: If JavaScript execution fails, the images remain fully visible and statically centered within their containers. No content is lost. [!] HTML structure lacks alt attributes on images, compromising screen reader accessibility.

Anatomy

• HTML: A sequential stack of <section> nodes. Each houses an .img-container that masks a high-resolution <img>.
• CSS: Establishes the clipping boundary. The .img-container uses overflow: hidden and a percentage-based padding trick to lock the aspect ratio. The child image is pre-scaled to scale(1.4) — this provides the essential “bleed” area required for the image to move up and down without revealing empty edges.
• JS: The nervous system. Lenis overrides native scrolling for a buttery linear interpolation (lerp). GSAP ScrollTrigger binds the image’s yPercent transform to the container’s intersection relative to the viewport.

Logic

The absolute synchronization between the smooth scroll engine and the animation engine prevents visual jitter.

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

Instead of letting Lenis and GSAP run on independent animation frame loops, this code hijacks the Lenis requestAnimationFrame and binds it directly to GSAP’s internal ticker. This ensures that the scroll position calculation and the resulting parallax transformation are processed and painted in the exact same frame. Zero lag.

Feel

Weightless and responsive. The low interpolation value (lerp: 0.07) on the scroll makes navigation feel like sliding on ice. Because the images move at a distinct velocity from the document stream, it creates a mechanical, decoupled depth. The interface reacts instantaneously to user input, offering a frictionless tactile experience.