SVG Mask Transitions on Scroll with GSAP and ScrollTrigger

A detailed tutorial covering four scroll-driven fullscreen image transition effects built with GSAP, ScrollTrigger, and SVG masks. The four effects are: horizontal blinds (strips expanding vertically from center), random grid (panels appearing in shuffled order), vertical blinds (strips expanding horizontally from center), and column random grid (wave-like left-to-right reveal with per-column randomness). Key implementation details include: using a 0–100 viewBox coordinate system for responsive SVG, Lenis for smooth scroll inertia, anti-aliasing gap prevention via crispEdges and small overlaps, dynamic layout recalculation on resize, and GSAP stagger patterns for rhythmic animation sequencing.