How to make an image reveal on scroll with GSAP

The technique in three decisions

Which mask. inset() is the simplest and most robust: it wipes from one edge and can have rounded corners. polygon() lets the opening be a diagonal or a sliver that grows from the centre, but the start and end polygons must have the same number of points to animate. A CSS mask-image with an SVG or a gradient gives soft edges and any shape you can draw, at a higher paint cost.

What moves inside the mask. The mask and the image are two separate layers. Put the clip on a wrapper and animate the scale (or a small vertical shift) on the image inside it. The wrapper keeps the layout box fixed while the picture moves within it, which is what gives the reveal depth.

Triggered or scrubbed. A triggered reveal plays once, at its own speed, when the image crosses a point in the viewport. It suits grids and editorial pages with many images. A scrubbed reveal is welded to the scrollbar and suits a single large image or a pinned sequence where the reader controls the pace.

A minimal version

Every element with data-reveal opens from the bottom edge while the image inside settles from a slight zoom.

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray("[data-reveal]").forEach((frame) => {
  const img = frame.querySelector("img");
  const tl = gsap.timeline({
    scrollTrigger: { trigger: frame, start: "top 85%", once: true },
    defaults: { duration: 1.4, ease: "power3.out" },
  });
  tl.fromTo(frame,
    { clipPath: "inset(100% 0% 0% 0%)" },
    { clipPath: "inset(0% 0% 0% 0%)" })
    .fromTo(img, { scale: 1.3 }, { scale: 1 }, 0);
});

[data-reveal] { overflow: hidden; clip-path: inset(100% 0 0 0); }
[data-reveal] img { display: block; width: 100%; height: 100%; object-fit: cover; }

Writing the starting clip in CSS keeps the image hidden before JavaScript runs, so it never flashes in and disappears. To scrub it instead, replace once: true with scrub: true and an end such as "top 30%".

Where it gets hard

Matching values. GSAP interpolates the numbers inside the clip-path string in order, so both ends need the same function and the same count of values. The shorthand inset(0) has one number and cannot be matched against four; write all four values, with %, on both sides.

Images that are not loaded yet. ScrollTrigger measures positions when it is created. If images above have no dimensions until they load, every trigger below starts in the wrong place. Give images width and height attributes or an aspect-ratio, and call ScrollTrigger.refresh() after late content arrives.

Lazy loading. A native loading="lazy" image may not have decoded when its reveal starts, and the mask opens on an empty box. Start loading a little before the trigger, or decode the image first with img.decode().

Reduced motion and no JavaScript. If the starting clip lives in CSS, make sure it only applies when the script is running, for example behind a class the script adds to the root element. Otherwise a failed script leaves every image hidden. For prefers-reduced-motion, skip the zoom and use a short fade.

Performance

Animating clip-path repaints the masked area on every frame, while transform and opacity do not. For a handful of images on screen this is fine on any device. Problems start with dozens of large images revealing at the same moment, or with soft masks made with mask-image and blur. Keep reveals staggered, prefer inset(), and let triggers that have played stop listening with once: true.