Lottie Scroll Donut Chart — Segments Fill on Scroll

The Lottie Scroll Donut Chart snippet fills a multi-colour donut one segment at a time as the visitor scrolls — each coloured slice sweeping in from where the last one ended — and empties it again on the way up. Nothing plays on a timer; the scrollbar drives the fill frame by frame, and the whole chart is generated in JavaScript, so the way each segment draws is fully visible in the code.

Lottie is JSON, assembled in code

A Lottie animation is a JSON document of vector layers and keyframes. Instead of fetching one, this snippet builds the animationData object directly and passes it to lottie.loadAnimation, so there is nothing to host and nothing that can 404. A segment helper stamps out each slice as a layer, and a keyframe helper assembles the draw with the easing tangents lottie-web requires.

Every segment is a trimmed ring

The donut is not four separate arcs drawn at different angles — it is four copies of the same thick stroked ring, each trimmed to a different slice of the circumference. A Lottie trim path (shape type tm) renders only a portion of a stroked path, from a start percentage to an end percentage. For segment two, for example, the trim start is fixed at forty percent and the trim end animates from forty to sixty-eight percent, so it draws only its own slice, beginning exactly where segment one ended. Every layer carries a minus-ninety-degree rotation so that zero percent starts at the top of the circle, the way a donut chart is conventionally read.

Drawing the segments in sequence

Each segment fills during its own window of the timeline. The windows are sized in proportion to the segment values and laid end to end, so the first slice draws over the opening frames, the second picks up right after, and so on until the ring is complete. Before a segment's window its trim end sits at its start percentage, so the slice is invisible until its turn; after the window it holds at full, so it stays drawn. The result is a donut that fills slice by slice in order rather than all at once.

The one keyframe detail that matters

When you author a Lottie by hand, every animated keyframe must carry its i (in) and o (out) bezier tangents. Omit them and lottie-web treats the keyframe as a hold keyframe: it never interpolates, so a trim end keyframed to grow stays stuck at its start and the slice never draws. The keyframe helper here attaches linear tangents to every keyframe, which is what makes the segments fill.

Autoplay off, scroll on

The animation is loaded with autoplay: false so its internal clock never runs. A GSAP ScrollTrigger pins the stage and scrubs a single plain value from 0 to 1 over a range several viewport-heights tall, and a requestAnimationFrame loop reads that value every frame and calls anim.goToAndStop(p * (totalFrames - 1), true). The true tells lottie-web the value is a frame number, and goToAndStop renders a single still frame without starting playback, so the fill is welded to scroll position. Because lottie-web interpolates between keyframes, fractional frames render smoothly.

Reversible for free

Deriving the frame from one scrubbed value means scrolling up produces smaller values, so the segments un-draw in reverse order with no extra code. A smoothed scrub: 0.5 lets the fill glide toward the scroll position rather than snapping to every wheel tick, and the caption fades out the moment the first slice appears. Pair it with the Lottie scroll bar chart or the Lottie scroll scrub ring for a fuller data reveal.