Scroll Path Journey
Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger. A marker follows the route while checkpoints activate on scroll.
About This Effect
A responsive scroll storytelling effect built with GSAP MotionPathPlugin and ScrollTrigger. As the user moves through the section, a directional marker follows an SVG route with automatic rotation, the traveled line draws behind it, and content checkpoints activate at precise progress values. Separate desktop and mobile paths keep the composition intentional at every size, while a ResizeObserver rebuilds MotionPath alignment without losing the reader's current position.
What's Included
- MotionPathPlugin route following with automatic tangent-based rotation
- ScrollTrigger scrub ties marker, line drawing, and checkpoint state to scroll progress
- Separate desktop and mobile SVG paths selected through gsap.matchMedia
- Responsive rebuild preserves animation progress when the scene changes size
- Clickable checkpoint navigation scrolls directly to any point on the route
- Configurable scrub smoothing, trigger positions, rotation, and active class via data attributes
- Custom checkpoint event for analytics, media changes, or application state
- Reduced-motion mode removes the long scroll and presents the complete journey statically
Perfect For
- Product stories that connect features along a visual route
- Travel and hospitality itineraries with interactive destinations
- Company timelines and process explainers with clear milestones
- Case studies that guide readers through research, design, build, and launch
- Educational diagrams where an object must follow a responsive SVG path
How It Works
The scene contains matched desktop and mobile SVG route paths plus a duplicate progress stroke. A paused GSAP timeline animates strokeDashoffset from the measured path length to zero while MotionPathPlugin aligns and moves the marker along the active path with autoRotate enabled. ScrollTrigger maps that timeline to the journey container's scroll range and selects the latest checkpoint whose data-progress value has been reached. gsap.matchMedia swaps route geometry at the mobile breakpoint, and a debounced ResizeObserver rebuilds the tween with its previous progress because MotionPath alignment is calculated when the tween initializes.