Scroll Progress Journey Trail — Free Sequential Waypoint Reveal

A sidebar trail of waypoint dots tracks progress through a multi-step narrative — sign up, import data, automate, scale — lighting each dot the first time its matching section crosses the viewport's center, while a connecting line behind the dots fills smoothly and continuously rather than jumping in discrete steps. It's built entirely in vanilla JavaScript: an IntersectionObserver with a center-anchored rootMargin handles the discrete waypoint lighting, and a separate scroll-position calculation drives the continuous line fill.

Center-anchored IntersectionObserver, not a default one

The observer uses rootMargin: '-50% 0px -50% 0px', which shrinks the observer's effective viewport to a single horizontal line at 50% height — so isIntersecting only flips true the instant a step's element crosses the exact vertical center of the screen, not whenever any part of it becomes visible. That precise center-crossing is what makes each waypoint light up in a way that feels tied to "you're now reading this section," rather than lighting up too early as the section first appears at the bottom of the viewport.

Two independently-computed signals, one visual trail

The waypoint dots (discrete, permanent once lit) and the connecting line fill (continuous, reversible) are calculated by two separate pieces of logic that happen to render into the same sidebar. The line fill reads the combined bounding-box height of the entire step sequence and computes what fraction of that total height has been scrolled past the viewport's center — a single continuous percentage applied as the fill element's height, independent of which waypoints have individually lit up.

Why this differs from a stepped timeline

A common pattern nudges a fixed indicator to each step's position only when that step becomes "nearest" to center, producing a trail that jumps between fixed stop points. This snippet's line fill instead recalculates from raw scroll position on every scroll event, so it visibly, continuously catches up while scrolling between two waypoints rather than staying pinned at the last lit stop until the next one is reached.

Sticky rail, scrolling content

The .jt-rail sidebar uses position: sticky so it stays in view alongside whichever step is currently being read, while .jt-main's sections scroll normally — a standard two-column sticky-sidebar layout, with all the position math and lighting logic layered on top in JavaScript.

Customizing it

Swap the numbered dots for small avatar photos or icons, add a fifth waypoint, or make the line fill snap to the nearest lit waypoint instead of tracking exact scroll position continuously. Pair it with scroll timeline dots for a GSAP-driven alternative, or a scroll progress bar for a simpler top-of-page indicator.