More Scroll Snippets
Front-End Coding Playgrounds
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewScroll SVG Path Draw — Free GSAP ScrollTrigger Snippet
Scroll SVG Path Draw · Scroll · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Scroll SVG Path Draw — A Line That Draws Itself on Scroll
The scroll SVG path draw is the effect where a winding line or route appears to draw itself stroke by stroke as you scroll — the technique behind animated roadmaps, timelines, and "how it works" sections. This snippet builds it with GSAP and ScrollTrigger (from a CDN) plus an inline SVG, using the classic stroke-dash trick.
The stroke-dash draw
The path is animated with two SVG properties. The script measures the path's true length with getTotalLength() and sets both stroke-dasharray and stroke-dashoffset to that length: the dash array makes a single dash that spans the whole path, and the matching offset pushes that dash entirely out of view, so the line starts invisible. Animating stroke-dashoffset back toward zero slides the dash into place, revealing the path progressively from start to end — the line literally draws itself.
Scrubbed to the scroll
A single gsap.to tweens strokeDashoffset to 0, tied to a ScrollTrigger on a tall stage with start: 'top top', end: 'bottom bottom', and scrub: true. Because the offset is bound to the scrollbar, the drawn portion of the line tracks exactly how far you've scrolled — scroll halfway and the line is half drawn; scroll back and it un-draws. ease: 'none' keeps the draw rate constant against scroll.
Sticky viewport, tall scroll
The SVG is position: sticky centered in the viewport while the stage is much taller than one screen (200vh). That combination is what gives the draw room to breathe: the line stays put on screen while you scroll a long distance, so the animation plays out over a comfortable range rather than flashing past. Step labels are absolutely positioned along the path to annotate stages as the line reaches them.
Gradient stroke
The stroke is painted with a vertical SVG linearGradient, so the line shifts hue from top to bottom as it draws — a premium touch that costs nothing and helps distinguish phases of a roadmap. stroke-linecap: round keeps the growing tip soft.
Why measure the length in JS
The dash values must equal the path's real length for the draw to start fully hidden and finish exactly complete. Hard-coding a guess leaves a gap or an overshoot; getTotalLength() reads the precise value for whatever path data you use, so the effect is correct for any shape — straight, curved, or a complex route.
Customizing it
Replace the path d with your own route or logo outline, change the gradient, the stroke width, or the stage height to slow or speed the draw, and reposition the step labels. Pair it with a scroll timeline dots, a vertical timeline, or a scroll pin steps section.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to work through the stroke-dash math by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why getTotalLength must be called on the path before setting stroke-dasharray and stroke-dashoffset to the same value, or why the stage needs to be far taller than one viewport (200vh) alongside position: sticky for the draw to have room to play out. The same assistant can help optimize it — asking whether re-measuring getTotalLength on window resize matters if the SVG's viewBox scales responsively, or whether the gradient's stop colors should shift as the line draws for extra visual interest. It's also useful for extending the effect: ask it to add a dot marker that travels along the tip of the drawing line, sync the step label callouts to specific percentages of the path length instead of fixed positions, or support multiple paths that draw in sequence rather than one continuous line. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a "scroll SVG path draw" effect in plain HTML, CSS, and JavaScript using GSAP with its ScrollTrigger plugin (load both from a CDN) and the native SVG stroke-dash technique — no MotionPathPlugin, no canvas.
Requirements:
- An inline SVG containing a single curved path (using cubic or smooth Bezier commands) with a gradient stroke defined via a linearGradient in defs, sitting inside a stage section that is significantly taller than one viewport height (e.g. 200vh).
- Style the SVG itself with position: sticky centered vertically in the viewport, so it remains visible on screen for the entire scroll distance of the tall stage rather than scrolling past quickly.
- In JavaScript, call getTotalLength on the path element to get its exact real-world length, then set both stroke-dasharray and stroke-dashoffset to that measured length (not a hardcoded guess) so the stroke starts completely invisible, pushed exactly one dash-length out of view.
- Register a single GSAP tween on the path's strokeDashoffset going from its current value down to 0, using ease none, driven by a ScrollTrigger whose trigger is the tall stage, starting when the stage's top reaches the top of the viewport and ending when the stage's bottom reaches the bottom of the viewport, with scrub set to true.
- Confirm the drawn portion of the line always matches how far the user has scrolled through the stage (half scrolled means half the path is drawn) and that scrolling back up visibly un-draws the line, purely because the offset tween is scrubbed in reverse.
- Add a few short text labels absolutely positioned near specific points along the path's visual course to annotate stages of the route, without needing to calculate their exact pixel positions from the path geometry.Step by step
How to Use
- 1Add the GSAP CDNsInclude gsap and ScrollTrigger from the CDN panel.
- 2Paste HTML, CSS, and JSA winding SVG line sits in a tall stage.
- 3Scroll downThe line draws itself from top to bottom.
- 4Scroll back upThe line un-draws — the offset is scrubbed.
- 5Use your own pathSwap the path d for a route or logo.
- 6Change the paceAdjust the stage height to slow the draw.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The script measures the path with getTotalLength() and sets stroke-dasharray and stroke-dashoffset to that length, so a single dash spans the path but is pushed out of view, leaving it invisible. Animating stroke-dashoffset back to zero slides the dash into place, revealing the path progressively — the classic SVG line-draw technique.
One gsap.to tweens strokeDashoffset to 0 with a ScrollTrigger on the tall stage using start: top top, end: bottom bottom, and scrub: true. Because the offset is bound to the scrollbar, the drawn portion matches how far you have scrolled — half scrolled is half drawn — and scrolling up un-draws it. ease: none keeps the rate constant.
The SVG is position: sticky and centered while the stage is 200vh tall. The line stays on screen while you scroll a long distance, so the draw plays over a comfortable range instead of flashing by. The extra height is the scroll budget that the scrubbed animation consumes.
The dash values must equal the path's real length for it to start fully hidden and finish exactly complete. A hard-coded guess leaves a gap or overshoots. getTotalLength() returns the precise length for any path data, so the effect is correct whether the line is straight, curved, or a complex route.
Render the inline SVG, then in a mount effect read getTotalLength() from a ref to the path, set the dash properties, and build the scrubbed tween after registering ScrollTrigger. Return a cleanup that reverts the GSAP context. Re-measure on resize if the SVG scales. The CSS and SVG markup port unchanged.