Scroll-Linked SVG Path Draw — Native CSS view-timeline, No GSAP

The scroll-linked "line draws itself in" effect — an SVG stroke that appears to trace its own path as the reader scrolls past it — is one of the most recognizable scroll animations on the web, almost always built with GSAP's DrawSVGPlugin and ScrollTrigger (see Scroll SVG Path Draw for that approach). This snippet reproduces the identical stroke-drawing mechanic using nothing but native CSS: a view-timeline binding stroke-dashoffset directly to the SVG's own scroll position, with no animation library and no JavaScript computing scroll progress.

The classic stroke-dasharray trick, now scroll-timed by CSS

stroke-dasharray is set to a value at least as long as the path itself (1400, comfortably longer than this particular route), and stroke-dashoffset starts at that same value, which hides the entire stroke behind an equally long gap. Animating stroke-dashoffset down to 0 reveals the stroke progressively from start to end — this half of the trick is identical to the GSAP version. What's different is what drives the animation's progress: instead of ScrollTrigger's scrub option computing a 0–1 value from scroll position on every frame, animation-timeline: --route-in — a named view timeline declared on the <svg> element itself — supplies that progress value natively.

A second element riding the exact same timeline

A small dot uses CSS offset-path (set to the identical path data) combined with offset-distance animated from 0% to 100%, bound to the same --route-in timeline via animation-range: contain 0% contain 100%. Because both the stroke draw and the dot's movement reference the same named timeline and the same range, they stay perfectly in sync with no manual coordination — both are simply reading the same scroll-derived progress value.

contain instead of cover, and why it matters for a tall SVG

animation-range: contain 0% contain 100% uses the contain keyword so the draw only progresses while the entire SVG is contained within the viewport — for an SVG taller than the viewport, this differs meaningfully from cover, which would start progress the instant the top edge appears even while most of the graphic is still off-screen below. contain here effectively requires the SVG to fit inside the viewport at all, which works well for a graphic sized to roughly viewport height, as this one is; a route taller than the viewport would need a cover-based range or a different sizing approach instead.

Comparing to the GSAP version

The GSAP Scroll SVG Path Draw snippet gives finer control — precise scrub smoothing, pinning, easing curves, and cross-browser consistency today, at the cost of a ~40KB dependency and a JS runtime cost per scroll frame. This CSS-only version has zero dependency weight and runs entirely on the compositor, at the cost of narrower browser support today and less granular control over easing along the path.

Browser support

Chromium-based browsers (Chrome, Edge, Opera, Brave) support animation-timeline: view() today. Firefox and Safari support is still landing, so an @supports not (animation-timeline: view()) block resets the stroke and dot to their fully-drawn end states rather than leaving the line invisible.

Customizing it

Swap the path's d attribute for your own route or logo outline (recompute stroke-dasharray to comfortably exceed the new path's length), adjust the gradient stops in <linearGradient id="spd-grad">, or change view-timeline-axis to inline for a horizontally-scrolling version of the same draw. Pair it with a Scroll Company Timeline or Vertical Timeline for a journey-style narrative.