Scroll effect

Dotted Path Traveller

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.35–0.35s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 1/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger, lenis

scroll-driven traveller along an SVG path: a single ScrollTrigger onUpdate reads progress, places a dot with getPointAtLength converted from viewBox space to painted-box pixels, retracts a trailing gap in stroke-dasharray to reveal the dotted line behind it, and toggles milestone classes by comparing progress against each milestone data-t; no tween on the traveller, smoothing from Lenis only. A ResizeObserver on the svg re-places milestones.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev16,653 chars

# 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…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.