Lottie Scroll Line Draw — Scroll-Drawn SVG Path

The Lottie Scroll Line Draw snippet strokes a flowing wave onto the screen as the visitor scrolls, with a glowing dot riding the leading edge of the line, and erases it again on the way back up. Nothing plays on a timer — the scrollbar drives the animation frame by frame — and the whole Lottie is generated in JavaScript rather than exported from After Effects, so you can see exactly how the drawing effect is built.

Lottie is JSON, and here it is built in code

A Lottie animation is a JSON document of vector layers and keyframes. Most tutorials fetch one with lottie.loadAnimation({ path: 'anim.json' }), but this snippet constructs the JSON object directly and passes it as animationData, so there is nothing to host and nothing that can 404. A pair of tiny helpers — one for scalar keyframes, one for multi-value keyframes — assemble the animation, and both always attach the easing tangents every animated keyframe needs.

The one keyframe detail that matters most

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, and the value stays frozen at the first keyframe forever. For a trim animating 0 to 100 that means the line never draws. The helpers here set linear tangents with control points at 0.5/0.5 on every keyframe, which is why the line grows smoothly instead of staying blank.

The draw effect is a trim path

The wave itself is a dense polyline — a sine sampled at sixty-odd points — wrapped in a Lottie trim path (shape type tm). A trim path 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 look like it is being drawn by a pen. A second, faint copy of the exact same path sits behind it with no trim, so the full route is always faintly visible — the same idea as a progress track. This is the vector equivalent of animating stroke-dashoffset on an SVG path, but expressed inside the Lottie so it travels with the animation.

A dot that rides the tip

To make the draw feel alive, a filled dot follows the leading edge of the line. Because the trim end and the dot both advance linearly over the same 120 frames, the tip position is predictable: the snippet samples the wave function at regular frames and keyframes the dot's position to match. The result is a dot that appears to be pulling the line into existence as you scroll.

Autoplay off, scroll on

The animation is loaded with autoplay: false so its internal clock never runs. Instead a GSAP ScrollTrigger pins the stage and scrubs a single plain value from 0 to 1 as the visitor scrolls through a range several viewport-heights tall. 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. Because lottie-web interpolates between keyframes, fractional frames render smoothly.

Reversible for free

Deriving the frame from one scrubbed value means scrolling up simply produces smaller values, so the line un-draws and the dot travels backward with no extra reverse-playback code. A smoothed scrub: 0.5 lets the drawing glide toward the scroll position rather than snapping to every noisy wheel tick, and the intro caption fades out the moment drawing begins. Pair it with the ring-drawing Lottie scroll scrub or a scroll typewriter for a full scroll-driven sequence.