# Scroll Path Journey > Responsive SVG motion path storytelling with GSAP MotionPathPlugin and ScrollTrigger. A marker follows the route while checkpoints activate on scroll. Canonical: https://gsapvault.com/effects/scroll-path-journey Live demo: https://gsapvault.com/demos/scroll-path-journey/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger, MotionPathPlugin | | Techniques | motion-path, svg-animation, scrub, scroll-storytelling, matchMedia, checkpoint-navigation | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add the stylesheet to your HTML ``:** ```html ``` **2. Add GSAP and the required plugins before ``:** ```html ``` **3. Add a journey container to your page body:** ```html

00%

``` The motion path, progress path, and shadow path must use the same `d` value. The script measures the progress path, aligns the marker to the motion path, and synchronizes both with the container's scroll range. ### Options All journey options go on the `[data-path-journey]` element. | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-journey-scrub` | `true`, `false`, number | `0.8` | ScrollTrigger scrub behavior. A number is smoothing time in seconds | | `data-journey-start` | ScrollTrigger position | `top top` | Scroll position where route movement begins | | `data-journey-end` | ScrollTrigger position | `bottom bottom` | Scroll position where route movement completes | | `data-journey-rotate` | `true`, `false` | `true` | Rotate the marker to match the path tangent | | `data-journey-active-class` | CSS class name | `is-active` | Class applied to the current checkpoint | Checkpoint option: | Attribute | Values | Description | |-----------|--------|-------------| | `data-progress` | Number from `0` to `1` | Route position where the checkpoint becomes current | Keep checkpoint values in ascending order. The script sorts them internally, but matching DOM and route order makes the markup easier to maintain. ### Accessibility - Checkpoints use native buttons and are available to keyboard and assistive-technology users. - The active checkpoint receives `aria-current="step"`. - An optional `[data-journey-status]` live region announces checkpoint changes without reporting every percentage update. - Decorative route SVGs use `aria-hidden="true"`. Give meaningful SVG diagrams `role="img"` and an accessible name instead. - `prefers-reduced-motion: reduce` removes the extended scroll range, hides the moving marker, draws the full route, and presents every checkpoint in a stable static composition. - Content is never hidden behind animation initialization, so the journey remains readable if JavaScript fails. ### Browser Support Modern evergreen browsers with SVG and ES6 support. `ResizeObserver` is used when available; the journey still works without it but will only rebuild when the media query changes or `window.ScrollPathJourney.refresh()` is called. ### Dependencies Required: - GSAP 3.12+ - ScrollTrigger - MotionPathPlugin Optional: - Lenis or another smooth-scroll library. The effect does not initialize one and works with native scrolling by default. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Scroll Path Journey](https://gsapvault.com/effects/scroll-path-journey) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt