Building a Scroll-Scrubbed Lottie Animation With lottie-web and GSAP ScrollTrigger

Building a Scroll-Scrubbed Lottie Animation With lottie-web and GSAP ScrollTrigger

You've almost certainly scrolled past one of these without knowing what powered it: a slick vector animation on a landing page that doesn't just play on a loop, but advances as you scroll — a product drawing itself, an illustration assembling, a progress ring filling exactly in step with how far down the page you are. That's a scroll-scrubbed Lottie , and it's the difference between an animation that runs on its own clock and one the visitor feels like they're driving. The Lottie Scroll Scrub snippet builds the whole thing — a glowing progress ring that "draws" itself around a circle and a checkmark that strokes in at the end, all tied frame-for-frame to the scrollbar — using the official lottie-web player and GSAP's ScrollTrigger, with the animation itself living right in the code as plain JSON. Here's the effect live — scroll inside the frame to draw the ring, and scroll back up to rewind it: Grab the code, or open the full editor with live HTML/CS…