An element travels along a winding SVG curve as you scroll. The path draws itself behind it; waypoint stops light up as the traveller passes them. Story-driven journey scrolls.
An element (an icon, a planet, a vehicle, an idea-bubble) follows a curved SVG path drawn across the page. The path itself draws in behind the traveller using the stroke-dashoffset trick (see 2.13). Waypoint markers along the path light up as the element passes them, and a side panel updates with copy for the current waypoint. Used by airline route maps, journey / onboarding pages, and brand-history narratives.
Define an SVG <path> with a smooth curve. Get its total length with path.getTotalLength(). On scroll, calculate progress 0→1; for the path-draw, set stroke-dashoffset = length × (1 − progress). For the traveller, call path.getPointAtLength(length × progress) which returns an {x, y} coordinate — use it to position the traveller via CSS transform or inline x/y attributes. Waypoint detection is just: which waypoint's progress threshold has been crossed?
Scroll inside. The amber dot travels the winding path. Waypoints light up. The side panel updates with copy.
A cold morning in May. The whole batch packed into one van.
Build a journey-style scroll where an element travels along a winding SVG path. Sticky pin (position:sticky top:0 height:100vh) inside a tall 2200px section. Inside the pin, an SVG viewBox 600 500 with two overlapping paths sharing the same "d" attribute — a winding cubic-Bezier S-curve through 4 stops — one rendered as a faint dashed gray "track" (the background path), the other as the "drawn" path in accent color with stroke-dasharray and stroke-dashoffset for the draw-in animation. Use path.getTotalLength() to set both dasharray and the initial dashoffset (full length so it's invisible by default). 4 waypoint <circle> markers positioned along the path using path.getPointAtLength(length * t) at t = 0, 0.33, 0.66, 1. A foreignObject element holds the "traveller" — a 44px accent-gradient circle with a glowing shadow and an arrow icon. On scroll: (1) compute progress 0→1 from section scroll; (2) set dashoffset = length * (1 - progress) so the path draws in behind the traveller; (3) position the traveller using path.getPointAtLength(length * progress) — set x/y attributes on the foreignObject; (4) highlight whichever waypoint we've passed by adding an .on class; (5) update a side info panel with the current stop's copy. Result: a smooth animated journey that drives narrative as you scroll.