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. The demo is dressed as a film unit's shooting locations: Chivo + Overpass Mono, ice grey and navy with a teal signal.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
To reproduce this animation in your own project, copy the prompt below into Claude Code, Cursor or any AI coding agent. The prompt is validated — it describes the exact structure, timing and easing, so the agent rebuilds the effect faithfully and you can then adapt colors, copy and layout to your design.
Prompt coming soon.