SVG Line Draw on Scroll

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Wrap any inline SVG in a data-draw container in your <body>:

Code snippet omitted: it ships with the download.

That is it. The script finds every drawable shape inside the container, measures it with getTotalLength(), and draws it as the container scrolls through the viewport.

Important: shapes must be stroke-based. Set fill="none" and give each shape a stroke and stroke-width (via attributes or CSS).

Modes

Attribute	Behavior
data-draw-scrub omitted or "true"	Drawing progress is tied to the scrollbar and reverses when scrolling back up
data-draw-scrub="1.2" (any number)	Smoothed scrub: drawing catches up to the scrollbar over that many seconds
data-draw-scrub="false"	Plays once when the container enters the viewport

Options

All options go on the data-draw container element.

Attribute	Values	Default	Description
data-draw-scrub	true, false, number	true	Scrub with scroll, smoothed scrub, or play once
data-draw-start	ScrollTrigger position	top 80%	When drawing starts (e.g. top 70%)
data-draw-end	ScrollTrigger position	bottom 60%	When drawing completes (scrub mode only)
data-draw-duration	Seconds	1.6	Draw time for the longest shape (play-once mode); relative pacing in scrub mode
data-draw-stagger	Seconds	sequential	Delay between successive shape starts. Omit for strict sequence, 0 for all at once
data-draw-ease	Any GSAP ease	none (scrub), power2.out (play-once)	Easing applied to each stroke

Per-shape option:

Attribute	Values	Description
data-draw-ignore	true	Placed on a shape or wrapper inside the container to exclude its geometry from line drawing

Supported Elements

Any SVGGeometryElement works because lengths are measured with getTotalLength():

<path>, <line>, <polyline>, <polygon>, <circle>, <ellipse>, <rect>

DOM order is draw order: shapes animate in the order they appear inside the SVG. Geometry nested inside data-draw-ignore="true" or data-draw-reveal is excluded from stroke drawing.

Optional Companion Hooks

These hooks synchronize map labels and atmosphere with the same reversible timeline. They are optional; the core line-draw API is unchanged.

Attribute	Placement	Description
data-draw-reveal	Element inside data-draw	Reveals the element with opacity, scale, and vertical movement as the route draws
data-draw-at	data-draw-reveal element	Normalized reveal position from 0 to 1; evenly distributed when omitted
data-draw-progress	Element inside data-draw	Outputs an integer from 000 to 100 and updates aria-valuenow
data-draw-atmosphere	Element inside data-draw	Applies subtle timeline-linked vertical parallax
data-draw-from / data-draw-to	Atmosphere element	Start and end yPercent; defaults to -1.5 and 1.5

For no-JavaScript safety, leave artwork visible in base CSS. If you pre-hide reveal elements behind a .has-js class, add a reduced-motion rule that makes them fully visible.

Timing Model

• The longest shape in the container draws over data-draw-duration seconds; every other shape scales proportionally to its measured length, so the pen speed feels constant across the whole illustration.
• With no data-draw-stagger, shapes draw in strict sequence: each starts when the previous one finishes.
• With data-draw-stagger="0.2", shape N starts 0.2 x N seconds in, overlapping for an organic cascade. data-draw-stagger="0" draws everything simultaneously.
• In scrub mode all durations are relative: the whole timeline is mapped onto the scroll distance between data-draw-start and data-draw-end.

Accessibility

• Reduced motion: respects prefers-reduced-motion. Both the CSS and the JavaScript force stroke-dasharray: none and stroke-dashoffset: 0, so users see the complete artwork immediately with no animation and no blank space
• Decorative SVGs: mark artwork with aria-hidden="true" and focusable="false" as shown in the examples; if the illustration carries meaning, use role="img" with an aria-label instead
• No interaction required: the effect is purely scroll-driven, so keyboard and touch users get the identical experience
• Custom events (linedraw:start, linedraw:complete) allow integration with assistive technologies

Browser Support

Modern browsers (ES6+). getTotalLength() on all geometry elements is supported in all evergreen browsers. Not compatible with IE11.

Dependencies

Required:

• GSAP 3.12+
• ScrollTrigger plugin

Optional:

• Lenis (smooth scroll integration; the script detects it automatically and works without it)

No DrawSVG plugin needed: the effect uses the native stroke-dasharray technique.