SVG Path Drawing

A route traces itself as you scroll, with a progress indicator and waypoint pops.

★ showcaseGSAPDrawSVGScrollTrigger

DrawSVGPlugin animates stroke-dasharray/offset from "0%" to "100%"; MotionPath-free dot follows via getPointAtLength.

Stroke drawing repaints only the SVG; vector-effect: non-scaling-stroke keeps it crisp.

The SVG has a <title>; reduced mode shows the full path.

Playgroundscroll

Lenis lerp0.10

Scrub smoothing0.60 s

ScrollTrigger markers

Export

{
  "lerp": 0.1,
  "scrub": 0.6,
  "markers": false
}