Dotted Path Traveller
What it does
A sticky scene where a dot travels along a drawn dashed SVG path as you scroll, the line revealing itself behind it and lettered milestones lighting up as it passes each one. The whole geometry lives in the path's `d` and nowhere else: the traveller and every milestone are placed by asking the path itself with `getPointAtLength()` (milestones carry a `data-t` fraction, not coordinates), so changing the curve moves all five things at once and the route can never drift from its labels. Reveal is done by putting the full length as a trailing gap in `stroke-dasharray` and retracting it, which preserves the dotted pattern instead of sliding it. A ResizeObserver re-places everything when the SVG box changes without a window resize. A flatter path swaps in below 760px so the labels stop colliding.
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
A route drawn by the reader's scroll. The section pins, and a small dot sets off along a dashed line that curves across the frame. Behind the dot the route turns solid ink; ahead of it, a faint dotted line shows where it is going. Named stops sit along the way, each with a short leader line, and they light up one by one as the dot passes them, while a counter in the corner adds up the distance travelled. It is built for content where the order in space is the information: where the ingredients come from, a delivery route, a timeline that does not want to be a straight bar.
It uses GSAP ScrollTrigger and Lenis, with no motion-path plugin.
Geometry in one place
The central idea is that the curve is the only source of truth. The stops do not carry coordinates; each one declares how far along the route it sits, as a fraction from start to finish. When the page loads, and again whenever the layout changes, the script asks the path itself where that fraction falls and places the label there. Edit the curve and the line, the traveller and every label move together, which is not true of labels positioned by hand.
The same question decides which side of the line each label goes on: the script looks at the curve just before and after each stop, so a label on a crest goes above and one in a trough goes below. The distance between a label and the line is measured from the label's real height, so editing a caption never makes it sit on top of the route.
Revealing a dotted line
Revealing a dashed line is harder than revealing a solid one. The usual line-drawing trick, animating the dash offset, slides the dots along the path instead of uncovering them, and folding the progress into the dash pattern quietly turns the dotted line into a solid one. Here the dotted pattern is never touched: a mask in the shape of the route is drawn progressively over it, so the dots stay exactly where they are and are simply uncovered.
The scroll mechanics
A single ScrollTrigger reports progress and the positions are written straight on every update, with Lenis providing the smoothness rather than a scrubbed tween. Stops light up by toggling a class with a CSS transition, so scrubbing back and forth past a stop cannot queue animations.
Performance, mobile and accessibility
Positions are converted from the SVG's internal units to real pixels on every layout change, and a ResizeObserver catches changes the window resize event misses, such as a web font finishing loading. On narrow screens the route switches to a flatter curve, since a tight S shape on a phone stacks its labels. With reduced motion enabled, the route is shown complete with every stop lit and no long pinned scroll, because the whole map at once is the information.
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.
# Dotted Path Traveller — a route with stops, drawn by the scroll
## Goal
Build a pinned scene where **a dot travels along a dashed line as you scroll**, the line
revealing itself behind it, and **named milestones light up as it passes each one**. Use it when
there is a journey with stops and the spatial order is the information: where the materials come
from, a route, a timeline that is not a straight bar.
## Tech
Vanilla HTML/CSS/JS with ES modules: `gsap` + `ScrollTrigger`, and `lenis`. **No `MotionPathPlugin`
and no SVG animation library** — `getPointAtLength()` is native, exact, and free.
Wire Lenis to ScrollTrigger — this is not optional:
```js
const lenis = new Lenis();
…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.