Preparing the journey
A journey through scroll-driven animation
MotionPath
An element traces an SVG path as you scroll — GSAP's MotionPath plugin synced with ScrollTrigger scrubbing.
Scrub Control
Scroll position directly controls animation progress. No autoplay, no timing — pure scroll-driven choreography.
SVG Paths
Bézier curves create natural, flowing paths that feel alive — far beyond linear point-to-point transitions.
Path Alignment
The traveller is aligned to the same SVG path it follows, keeping the motion accurate even as the viewport changes.
Companion Glow
The second circle mirrors the same route as a soft glow, adding visual weight without introducing extra animation logic.
Easing
The path uses linear movement so the scroll position remains the source of truth, rather than a separate timed animation.
Reveal Timing
Each information card appears as it reaches the viewport, turning the river section into a sequence of small discoveries.
Parallax creates depth. Each layer responds to scroll at its own rate, building a sense of dimensionality that flat design can never achieve.
Primitive
Every morph begins with a base shape. SVG paths are just coordinates — GSAP interpolates between them, point by point.
The section locks in place while scroll input drives horizontal movement. ScrollTrigger's pin feature with scrub creates the illusion of a sideways journey.
Complex animation sequences play forward and backward as you scroll — each keyframe accessible at any point. The scroll bar becomes a playback scrubber.
ScrollTrigger's snap configuration locks to the nearest panel after momentum settles — discrete steps within continuous scroll.
Multiple elements animate in concert — the number fades, the card slides, the background shifts — all orchestrated by a single ScrollTrigger instance.
Every scroll tells a story. Every pixel, a moment in time.
A single-page showreel demonstrating ScrollTrigger, MotionPath, shape morphing, parallax layers, horizontal pinning, staggered reveals, and text scrubbing — all orchestrated by GSAP.
Interaction turns scrolling into storytelling.
Built with GSAP · ScrollTrigger · MotionPath