SVG Line Draw on Scroll
SVG paths draw themselves as you scroll using the stroke-dasharray technique. Scrubbed or play-once modes, works on any SVG shape, no DrawSVG plugin required.
About This Effect
A scroll-driven SVG line drawing effect that animates strokes as if sketched by an invisible pen, using the classic stroke-dasharray / stroke-dashoffset technique. It needs no premium plugin: core GSAP plus ScrollTrigger handle everything, and each shape is auto-measured with getTotalLength() so it works on paths, lines, circles, rects, and polylines alike. Choose scrubbed drawing that follows the scrollbar in both directions, or a play-once reveal when the artwork enters the viewport.
What's Included
- Scrub mode ties drawing progress directly to scroll position, fully reversible
- Play-once mode draws shapes on viewport entry with configurable duration and ease
- Auto-measures every shape with getTotalLength(), no manual dash values needed
- Works on path, line, polyline, polygon, circle, ellipse, and rect elements
- Length-proportional timing keeps the pen speed consistent across long and short strokes
- Stagger control for multi-path illustrations, from overlapping cascades to strict sequence
- No premium plugins required, core GSAP plus ScrollTrigger only
- Accessible, respects prefers-reduced-motion with fully drawn static artwork
Perfect For
- Process and roadmap pages where a route draws between milestones as users scroll
- Hand-drawn signature or logo reveals in hero sections
- Decorative underline flourishes beneath headings
- Timeline and journey infographics with branching paths
- Architectural or technical diagrams that sketch themselves in
How It Works
On load the script queries every drawable shape inside a [data-draw] container and measures it with getTotalLength(). Each stroke receives a stroke-dasharray equal to its own length and a matching stroke-dashoffset, hiding it completely. A gsap.timeline() then tweens strokeDashoffset to zero: attached to a scrubbed ScrollTrigger the drawing follows the scrollbar exactly, or with scrub disabled it plays once when the container enters the viewport. Shape durations scale proportionally to measured length so complex illustrations draw at a natural, even pace.