Smooth Parallax Scroll Layout

This GSAP ScrollSmoother Parallax Gallery represents a high-end implementation of scroll-based storytelling suitable for portfolios or luxury brand landing pages. It leverages the full power of the GreenSock ecosystem - specifically the premium ScrollSmoother and SplitText plugins - to create a “buttery” smooth scroll experience where content reveals itself with elegant, staggered animations and depth-inducing parallax.

Core Technique: Scrubbed Parallax & Smooth Wrapper

The magic of this component lies in the combination of a virtual scroll wrapper and scrubbed animations.

1. The ScrollSmoother Setup

Unlike standard CSS scrolling, this code utilizes GSAP’s ScrollSmoother. The entire content is wrapped in a #smooth-wrapper and #smooth-content. This allows the JavaScript to “hijack” the native scroll, adding momentum and easing to the user’s movement, which is essential for the high-end “app-like” feel.

2. Image Parallax Logic

The parallax effect is achieved not by moving the container, but by moving the image inside the container at a different speed than the scroll. The function initParallax targets the image wrappers. Notice scrub: true—this locks the animation frame directly to the scrollbar position, rather than playing it over time.

function initParallax() {
    slides.forEach((slide, i) => {
        let imageWrappers = slide.querySelectorAll('.col__image-wrap');
        
        // Move image from -30vh to 30vh relative to container
        gsap.fromTo(imageWrappers, {
            y: "-30vh"
        },{
            y: "30vh",
            scrollTrigger: {
                trigger: slide,
                scrub: true, // Links animation to scrollbar
                start: "top bottom", // Start when slide top hits viewport bottom
                snap: {
                    snapTo: 0.5,
                    duration: 1,
                    ease: 'power4.inOut'
                }
            },
            ease: 'none'
        })
    });
}

Browser Support

This template relies heavily on JavaScript for layout positioning (via ScrollSmoother). It works in all modern browsers but requires a specific setup.