Lottie Scroll Bar Chart — Bars Grow on Scroll

The Lottie Scroll Bar Chart snippet grows a row of coloured bars up from a baseline as the visitor scrolls, one column staggered a beat behind the next, and shrinks them back down on the way up. Nothing plays on a timer — the scrollbar drives the animation frame by frame — and the whole chart is generated in JavaScript rather than exported from After Effects, so the growth mechanism is fully visible in the code.

Lottie is JSON, and here it is 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 small layer helper stamps out each bar, and a keyframe helper assembles the growth animation with the easing tangents lottie-web requires.

Growing a bar with scale, not height

The natural instinct is to animate a rectangle's height, but that grows it from the centre in both directions. The trick used here is to grow the bar with a transform scale instead. Each bar is a group whose origin sits exactly on the baseline; inside it, the rectangle is positioned so its whole body is above that origin. Animating only the group's vertical scale from 0 to 100 then stretches the bar upward from the base, exactly like a real column filling in — no repositioning maths required. At scale 0 the bar collapses onto the baseline and is invisible; at 100 it stands at full height.

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 scale animated 0 to 100 stays stuck at 0 and the bar never grows. The keyframe helper here attaches linear tangents to every keyframe, which is what makes the bars actually rise.

The column stagger

The bars do not all grow at once. Each bar's scale animation is offset by its column index — column two starts a beat after column one, and so on — so the chart fills in as a left-to-right sweep rather than a flat simultaneous pop. That single per-column delay is what gives the reveal its rhythm; without it the chart would feel like a snap rather than a build.

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 chart's growth 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 bars shrink back down in reverse order with no extra code. A smoothed scrub: 0.5 lets the growth glide toward the scroll position rather than snapping to every wheel tick, and the caption fades out the instant the chart begins to build. Pair it with the Lottie scroll line draw for a trend line, or the Lottie scroll scrub ring for a summary stat.