Scroll Image Mask — Free GSAP ScrollTrigger Clip-Path Reveal

The scroll image mask is the cinematic reveal where an image starts as a thin centered slot and expands to fill the frame as you scroll, while the picture inside subtly un-zooms — the dramatic media reveal from editorial and product launch pages. This snippet builds it with GSAP and ScrollTrigger (from a CDN) using an animated CSS clip-path.

clip-path inset as the mask

The frame's reveal is driven by clip-path: inset(...), which crops the element by a percentage from each edge. At rest it's inset(42% 38%) — cropped heavily top/bottom and left/right, leaving only a small central window. Animating the inset toward inset(0%) un-crops it edge by edge until the whole frame shows. Because clip-path clips rather than resizes, the media behind stays put while the visible window grows, which is exactly the "opening aperture" feel.

A scrubbed, pinned timeline

The stage pins (pin: true) and a scrubbed timeline runs for end: '+=140%', so the aperture opens in direct response to scrolling. Three tweens share position 0-ish: the clip-path opens, the media scales from 1.3 down to 1, and the caption rises in slightly later (at 0.3 on the timeline). ease: 'none' keeps the opening linear so it tracks the scrollbar, and the whole thing reverses on scroll-up.

The counter-zoom

The media starts scaled to 1.3 and eases to 1 as the mask opens. This counter-zoom is a subtle but important touch: as the window expands, the image gently pulls back, so you feel like you're seeing more of the scene rather than the same crop stretched. It mirrors the language of a camera revealing a wider shot.

Why clip-path over width/height

You could animate the frame's width and height, but that reflows layout and resizes the media with it, breaking the aperture illusion. clip-path is a GPU-composited paint operation — it changes only what's visible, not the box, so the image inside holds steady while the mask opens, and there's no layout thrash. will-change: clip-path hints the compositor.

Asset-free demo

The "photo" is layered CSS gradients with a darkening overlay so the caption stays legible. Swap .im-media's background for a real background-image and the reveal is identical, since the timeline only touches clip-path, transform, and opacity.

Customizing it

Change the starting inset for a different slit shape (a horizontal letterbox, a vertical slot), the open distance via end, the counter-zoom amount, or the caption timing. Pair it with a scroll split panels reveal, a scroll zoom hero, or a scroll curtain reveal.