webdevpuneet.com

Scroll Path Timeline

Desktop · 1280px · shown at 0% · scroll inside the preview to see the effect

Related Section Templates

6 sectionsView all →
1–5 of 6
Scroll effects

Scroll Path Timeline

Responsive · Animated
Scroll effects

Pinned Scroll Story

Responsive · Animated
Scroll effects

Stacking Cards

Responsive · Animated
Scroll effects

Horizontal Scroll Gallery

Responsive · Animated
Scroll effects

3D Scroll Carousel

Responsive · Animated

Scroll Path Timeline — Free Website Section Template

Scroll effects · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryScroll effects
Tagsscrolltimelinesvgdraw on scrollmilestonesroadmapgsaplight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

SVG line that draws itself as you scroll
Milestones light up when the line reaches them
Alternating left and right on wide screens
2 to 10 milestones with date, icon, title and text
Inline SVG in your theme colours, no image files
Fully drawn and readable without JavaScript
GSAP ScrollTrigger scrub, reduced motion respected
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Scroll Path Timeline — Free SVG Draw-on-Scroll Section

Scroll Path Timeline: A vertical timeline joined by a hand-drawn SVG line. As visitors scroll, the line draws itself down the page and each milestone lights up when the line reaches it. Milestones have a date, icon, title and text. The line is inline SVG coloured by the theme, so it always matches; without JavaScript it is simply drawn in full.

Scroll Path Timeline connects milestones with a hand-drawn SVG line that draws itself as visitors scroll. Each milestone lights up the moment the line reaches it, so the page feels like it is telling the story in real time.

SVG that follows your theme

The line is inline SVG coloured with the theme's brand colour, and the milestone dots use your icons, so it matches any preset or brand kit with no image files.

Milestones you can edit

Add 2 to 10 milestones, each with a date or label, an icon, a title and text. On wide screens they alternate left and right of the line; on narrow screens they line up on one side.

Visible without JavaScript

Without JavaScript or with reduced motion the line is fully drawn and every milestone is shown. With GSAP the stroke is scrubbed from hidden to drawn using its own length, no plugin needed. Export HTML, a ZIP, React or Vue.

Getting the most from it

Use it for a sequence that really has an order, such as a company history, a project roadmap, an onboarding journey or a wedding day schedule. Keep milestone titles short and put the year or step number in the label so the path reads as a timeline even at a glance. Six to eight milestones work best; past that, the line becomes long and visitors skim. Add a short sentence under each title that says what changed, not just what happened.

Why use it

Why Use the Scroll Path Timeline

〰
Momentum on the page
A line that grows as you scroll pulls readers forward through the story.
🎨
Always on brand
The SVG takes your theme colours, so it fits any palette without new artwork.
✓
Content first
All milestones are real HTML text; the drawing is a bonus layered on top.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and milestones in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewThis section is driven by scrolling: scroll inside the preview to see the effect, press Refresh to restart it from the top, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏢
Company history
Show the founding year, first customers, big launches and today’s numbers on an About page, with the line drawing the company’s journey as visitors read.
🗺️
Product roadmap
Share what shipped, what is in progress and what comes next, with dates as labels, so customers see momentum and know what to expect.
🎟️
Event agenda
Lay out the schedule of a conference or wedding day as milestones with times, so guests follow the day from arrival to the last dance.
🎓
Learning path
Guide students through the modules of a course in order, each milestone describing what they will learn and build at that stage.

In real websites

Website Templates That Use the Scroll Path Timeline Section

The Scroll Path Timeline section is part of 3 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Wedding Website, Law Firm Website, Church Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

The path’s stroke is dashed to its own length and GSAP scrubs the dash offset from hidden to fully drawn while the timeline crosses the screen. No DrawSVG plugin is needed.

Yes. The path is a plain SVG path in the HTML; replace its d attribute in the exported code with any curve and the drawing still works because it measures the path’s length.

They are dimmed and slightly lowered, then fade in fully as the line arrives. Without JavaScript they are all shown normally.

Yes. From 900px wide the milestones alternate on both sides of a centred line; below that the line runs down the left with all milestones on the right.

It saves an editable copy of your Scroll Path Timeline in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.