One mask-image, one linear-gradient. GSAP staggers an array of plain numbers, one per strip, and every frame rewrites the gradient's hard stops from them. Tune it in the preview, then copy production code for GSAP + mask, pure CSS or GSAP + canvas. Every setting updates all three.
Scroll to revealGSAP can tween any object, not only elements. strips is an array of { progress: 0 }. Passing the whole array to .to() with stagger gives every strip its own delayed, eased progress from 0 to 1.
In the timeline's onUpdate, each strip becomes a band from stripStart to stripStart + stripSize × progress. The mask version writes those bands as gradient hard stops. The canvas version fills them as rectangles and draws the image into them.
The code wraps the setup in createMaskReveal() or createCanvasReveal(). Single mode calls it once with a pinned track. Multiple mode calls it for every matching element, each with its own start and end.
GSAP + mask is the most flexible. Pure CSS needs no library but has less browser support for scrubbing. Canvas behaves the same in every browser and gives per-pixel control, at the cost of turning the image into pixels.