scroll-progress-timeline

Render steps as a semantic ordered list, place a base line behind the points, and overlay a progress line scaled with scaleY from a normalized scroll value. Measure the first and last point centers, batch DOM writes in requestAnimationFrame, and recalculate after resize or font loading.

Use IntersectionObserver for simple active-state entry, and use a normalized scroll measurement or GSAP ScrollTrigger when the line must fill continuously or coordinate pinned media. Keep transform-origin at top for vertical lines or left for horizontal ones so updates stay on the compositor.

Yes. Under prefers-reduced-motion: reduce, show the complete line or discrete reached states without scrubbed interpolation, blur, pinning, or large transforms. Ordinary document flow and all step content must remain intact.

Misalignment happens when geometry is measured before fonts and images finish loading or after layout changes. Recalculate point centers after font loading, resize, orientation changes, and content mutation, and schedule DOM writes in a single animation frame.

Use pinned full-screen chapters only when each step carries a distinct visual state, and keep the pin finite with release before the next section. For long copy or mixed card heights, a left rail layout preserves reading order better than alternation or pinning.