Scroll Text Draw — Free GSAP SVG Outline Snippet

The scroll text draw renders a headline as SVG outlines that trace themselves in as you scroll — like watching a hand letter the word — and once the strokes complete, the gradient fill floods in and the outline recedes. Scroll up and the word erases itself. This snippet builds it with GSAP ScrollTrigger (from a CDN) and the classic stroke-dashoffset trick applied to <text>.

The dash trick: a stroke hidden by its own offset

Every SVG stroke can be dashed with stroke-dasharray and shifted with stroke-dashoffset. Setting both to the same value — here 1000, longer than any letter's outline — makes the visible dash start exactly one dash-length away, so the stroke is completely invisible. Tweening the offset back to 0 slides the dash along each glyph's contour, and the letters appear to draw themselves. On a scrubbed timeline, the scrollbar becomes the pen.

Why the dash length is a constant, not a measurement

For a <path> you'd measure getTotalLength(), but SVG <text> has no path-length API — its outlines live inside the font. The pragmatic standard is a constant comfortably longer than the longest glyph contour. The only cost of oversizing: some letters finish drawing slightly before others (each contour shorter than 1000 completes early in the tween). Visually this reads as natural hand-lettering variation. If you need per-letter precision, convert the text to outlines in an editor and export real paths.

Two stacked text layers separate stroke from fill

The word is rendered twice at identical coordinates: a stroke-only layer (fill: none) and a fill-only layer (opacity: 0). Splitting them means the draw and the ink are independently animatable — the fill fades in at timeline position 1.6, while the stroke simultaneously dims to 25% instead of vanishing, leaving a subtle contour like inked linework under a wash. A single text element can't crossfade its own stroke against its fill this cleanly.

Gradient via url() reference

Both layers paint with url(#stdGrad), a <linearGradient> defined in <defs>. SVG paint servers apply to stroke and fill alike, so the outline and the flood share the exact same indigo-to-cyan ramp — a coherence trick that's awkward with CSS text (where stroke gradients need background-clip hacks).

Choreography: draw, ink, caption

The pinned timeline runs three beats: the outline draws for 2 units, the ink crossfade starts at 1.6 (slightly overlapping the final strokes so it feels continuous, not staged), and the letter-spaced caption fades at 2.2 as a sign-off. end: '+=180%' gives the whole sequence almost two viewport-heights of scroll, and scrub: 0.4 smooths wheel ticks into pen glides.

text-anchor centers without layout math

text-anchor: middle with x="50%" centers the word inside the responsive viewBox, so the SVG scales from phone to desktop with zero JS measurement — the drawing coordinates are resolution-independent by nature.

Customizing it

Change the word (bump DASH if you use a long word in a heavier font), the gradient stops, or the stroke width for a bolder sketch. Pair it with the line-drawing scroll SVG path draw, a scroll text clip reveal for paragraph copy, or gradient text for static headings elsewhere.