Scroll-Powered SVG Stroke Draw
What it does
A thick serpentine orange SVG stroke draws itself behind the page content as you scroll, using the classic strokeDasharray/strokeDashoffset technique: the path length is measured on load and a scrubbed ScrollTrigger (ease none) animates the dashoffset to 0 across the spotlight section, with Lenis smooth scrolling.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
How it works
An editorial page where a thick orange ribbon draws itself as you read. Between an intro and an outro heading, a tall section alternates line-art illustrations and text cards, and behind all of it a bold serpentine line snakes left and right down the page. At the top of the section nothing is drawn; as you scroll, the ribbon is inked in from its starting point, looping behind the cards and images, and it reaches its end exactly as the section finishes.
It is built with GSAP ScrollTrigger and Lenis.
How a line draws itself
An SVG stroke can be drawn as a dashed line, and the dash pattern can be shifted along the path. If the dash is as long as the whole path and it is shifted by that same length, the visible part of the dash sits entirely beyond the end of the line and nothing is painted. Shrink the shift and the dash slides back onto the path, revealing it from the start. So the drawing is nothing more than one number going from the path's full length to zero. The script measures the real length of the path in the browser, so the technique works with any curve you draw.
That number is driven by a single ScrollTrigger over the whole section, scrubbed directly to the scroll with a linear ease, so the length of line on screen always matches how far through the section you are. Lenis provides the smooth scroll and runs on GSAP's ticker, so the scrub never lags behind the page.
Designing the path
The shape carries the effect. The path is drawn in a tall, narrow coordinate space so that, once the SVG is scaled to the width of the section, it runs down the page instead of across it, swinging between the left and right columns so it threads behind the alternating rows of content. It sits in a background layer under everything else, and its very heavy stroke with rounded ends makes it read as a ribbon rather than a hairline.
Where it gets hard
Drawing speed is uneven by nature: progress is measured along the path, so where the curve doubles back on itself the line covers more length per screen of scroll and seems to accelerate. Placing the loops so they land behind the content, and tuning where the section starts and ends, is what makes the pace feel even. The stroke colour also lives on the SVG rather than in the CSS variables, so it has to be kept in sync with the palette by hand.
Mobile and accessibility
Animating one property on one path is very light. On narrow screens the rows stack and the SVG is scaled much wider than the viewport, so the loops still swing visibly instead of shrinking into a thin squiggle. With reduced motion enabled, the simplest fallback is to show the line fully drawn.
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.
# Scroll-Powered SVG Stroke Draw — Serpentine Line Drawn On Scroll
## Goal
Build an editorial scroll page whose star effect is a **thick orange serpentine SVG stroke that draws itself behind the content as you scroll**. The stroke lives in a background layer (`z-index:-1`) spanning a tall middle section; using the classic `strokeDasharray` / `strokeDashoffset` technique, the whole squiggly path starts fully hidden and is progressively "inked in" from start to finish, scrubbed 1:1 to scroll position across that section. Smooth scrolling via Lenis. Above and below the drawing section sit a full-viewport intro and outro heading.
## 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 (it owns the scroll driving the scrub).
```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.