Scroll Zoom Hero — Free GSAP ScrollTrigger Zoom Hero Snippet

The scroll zoom hero is the cinematic opener where the background image scales up and the headline drifts away as the visitor scrolls past — the "descend into the frame" effect on modern landing and editorial pages. This snippet builds it with GSAP and ScrollTrigger (loaded from a CDN), plus plain HTML and CSS, with no image assets required.

One scrubbed timeline

The whole effect is a single GSAP timeline tied to a ScrollTrigger with scrub: true, so every tween's progress is driven directly by the scroll position rather than time. Three tweens run in parallel from position 0: the media layer scales from 1 to 1.6, the copy lifts up and fades to zero, and a darkening overlay deepens. Because they share one scrubbed timeline, they advance in perfect lockstep with the scrollbar and reverse cleanly when you scroll back up.

Pinning without reserving space

The hero pins with pin: true and pinSpacing: false, so it stays fixed for one screen of scrolling while the section below slides up to meet it. Using pinSpacing: false means the pin doesn't add extra scroll height — the next section overlaps the pinned hero, producing the seamless handoff where the page content rises over the zooming image instead of leaving a gap.

Mapping the range

start: 'top top' begins the animation when the hero reaches the top of the viewport, and end: 'bottom top' finishes it after one viewport of scrolling. That one-screen range is the sweet spot: long enough to feel deliberate, short enough that the zoom completes before the hero is gone. ease: 'none' on each tween keeps the motion linear so it feels glued to the scroll.

The overscan trick

The media layer is inset by a negative margin (inset: -6%) so it's slightly larger than the hero. As it scales up, the zoom never reveals an edge, and the starting state already hides the overscan — a small but essential detail for any scroll-zoom so the image always fills the frame. will-change: transform promotes the layer to its own compositor layer for smooth scaling.

Asset-free, drop-in ready

So the snippet runs with zero downloads, the "photo" is built from layered CSS gradients plus a dotted texture. In production you'd swap the .zh-media background for a real background-image; the timeline is identical because it only animates transform and opacity, which work on any background.

Customizing it

Change the zoom amount, the copy's exit direction, the overlay strength, or the scroll range via end. Add a parallax layer or a second line of copy that enters as the first leaves. Pair it with a scroll horizontal pin, a scroll image mask, or a parallax hero.