GSAP Scroll-Drawn SVG Timeline Section
Overview
A process or history section for React and Next.js where a winding SVG line draws itself as you scroll, weaving between the steps. Its tip holds one height on screen, and each step lights up the moment the line reaches it.
The path isn't a fixed drawing. It's generated from where your steps actually land on the page, so it fits any amount of text, and it rebuilds when the width or a line wrap changes the layout.
Details
- Category
- Timeline
- Interaction
- On Scroll
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
(02)FAQ
GSAP Scroll-Drawn SVG Timeline Section — FAQ
01How many steps can it take?
Any number. The stage grows with the list and the path is rebuilt to match. Four to seven reads well as a process.
02What does it do on phones?
Below 720px wide, the line runs straight down the left edge and the steps sit in one column beside it.
03Can I change where the line's tip sits?
Change HEAD at the top of the file. It's a percentage of the screen height, and both the line and the steps read from it.
04What if it's the last thing on my page?
It still finishes. If the page ends before the bottom of the section reaches the reading line, the tip catches up over the last screen of scrolling, and the steps light up as it reaches them.
05What happens with reduced motion?
The whole line is drawn and every step is fully visible from the start, with no marker and nothing tied to scrolling.