Scroll-Powered SVG Stroke Drawing
What it does
A tall inline SVG path with a thick orange rounded stroke sits behind a column of content rows; using the strokeDasharray/strokeDashoffset technique, a scrubbed ScrollTrigger (Lenis-smoothed) progressively draws the winding stroke from top to bottom as the user scrolls through the section.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Draw SVG Stroke On Scroll — Scroll-Scrubbed Self-Drawing Line
## Goal
Build an editorial scroll page whose star effect is a **tall, winding, thick orange stroke that draws itself on from top to bottom as you scroll**. A single inline `<svg>` path — a chunky, rounded, S-shaped ribbon — sits **behind** a centered column of content (image rows and text cards) at `z-index: -1`. Using the classic `strokeDasharray`/`strokeDashoffset` line-drawing trick, one **scrubbed** GSAP `ScrollTrigger` ties the stroke's `strokeDashoffset` directly to scroll progress through the middle section, so the orange line appears to snake into existence behind the content and un-draws when you scroll back up. Smooth scroll via Lenis. That's the whole trick — no timeline, no stagger, one property.
## Tech
Vanilla HTML/CSS/JS with ES module imports, in a fresh Vite project. Install and import from npm:
- **`gsap`** (3.x) plus the plugin **`ScrollTrigger`**.
- **`lenis`** — smooth scroll, wired into GSAP's ticker and `ScrollTrigger.update`.
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.