Lottie Scroll Scrub — Frame-by-Frame JSON on Scroll

The Lottie Scroll Scrub snippet plays a Lottie animation with the scrollbar instead of a clock — as you scroll down a pinned section, a progress ring "draws" itself around a circle and a checkmark strokes in at the end, and scrolling back up rewinds the whole thing. It pairs the official lottie-web player with GSAP's ScrollTrigger, and the entire animation is a plain JSON object embedded right in the code, so there is nothing to fetch and nothing that can 404.

Lottie is just JSON, and you can inline it

A Lottie animation is a JSON document (exported from After Effects via Bodymovin, or authored by hand) describing vector layers, shapes, and keyframes. Most tutorials load it from a URL with lottie.loadAnimation({ path: 'anim.json' }), but that means an extra network request and a file that has to be hosted somewhere. This snippet instead passes the JSON directly as animationData, so the animation ships inside the component. To use your own file, you delete the animationData object and swap in path: 'your-animation.json' — every other line stays identical, because the player's API is the same either way.

Autoplay off, scroll on

The critical option is autoplay: false. A normal Lottie plays on a timer the moment it loads; here we never want the internal clock to run, because scroll position — not elapsed time — decides which frame is visible. With autoplay disabled and loop: false, the animation sits frozen at frame 0 until we explicitly seek it.

goToAndStop is what makes it scrubbable

Each frame, the snippet calls anim.goToAndStop(frame, true). The second argument, true, tells lottie-web the value is a *frame number* (not milliseconds), and goToAndStop renders that single still frame without starting playback. Multiplying the scroll progress (0 to 1) by anim.totalFrames - 1 gives the exact frame for the current scroll position. Because lottie-web interpolates between keyframes, fractional frame values render smoothly, so the ring grows continuously rather than snapping between discrete steps.

One scrubbed value, driven by ScrollTrigger

Rather than reading the raw scroll offset, the snippet tweens a single plain number — state.p — from 0 to 1 with a GSAP ScrollTrigger that pins the stage (pin: true) and scrubs over a range several viewport-heights tall (end: '+=400%'). A requestAnimationFrame loop reads state.p every frame and seeks the Lottie accordingly. Deriving the frame from one normalized value each frame — the same approach used by the scroll tunnel and scroll camera path snippets — is what makes the effect fully reversible: scrolling up simply produces smaller values, and the animation plays backward with no extra code.

The "draw" effect comes from a trim path

The ring and checkmark don't fade in — they *stroke on*, like a pen drawing a line. That is a Lottie trim path (shape type tm): it renders only a portion of a stroked path, from a start percentage to an end percentage. Animating the trim's end from 0 to 100 across the timeline makes the stroke appear to draw itself. A faint static "track" ring sits behind the coloured one so the circle's full path is always visible, exactly like a circular progress indicator. This is the same visual idea as an SVG path-draw on scroll, but authored once in Lottie and reusable anywhere the player runs.

A smoothed scrub for a premium feel

A numeric scrub: 0.5 lets the animation glide toward the scroll position over about half a second instead of snapping frame-perfectly to every wheel tick. Wheel and trackpad input is noisy; that small amount of smoothing turns raw scroll jitter into a fluid, deliberate playback that feels designed rather than mechanical.

SVG renderer for crispness

The animation uses the svg renderer, so the ring stays razor-sharp at any size and picks up a CSS drop-shadow glow for free. For very heavy animations you could switch to the canvas renderer, but for a vector progress ring, SVG gives the cleanest result and the smallest DOM.