# 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. Canonical: https://gsapvault.com/effects/svg-line-draw Live demo: https://gsapvault.com/demos/svg-line-draw/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | svg-line-draw, scrub, scroll-reveal, stagger | | Uses Lenis | Yes | ## Overview 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before closing `` tag:** ```html ``` **3. Wrap any inline SVG in a `data-draw` container in your ``:** ```html

``` 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 | ### 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. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy SVG Line Draw on Scroll](https://gsapvault.com/effects/svg-line-draw) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt