Horizontal Journey
Overview
Horizontal scroll narratives give each chapter the full viewport — no fold, no competition, no skimming. This showcase uses GSAP ScrollTrigger to pin the viewport and map vertical scroll to horizontal translation, moving visitors through a 6-chapter story.
Technical Approach
Scroll-to-Horizontal Mapping
GSAP ScrollTrigger pins the wrapper and tweens the track's translateX from 0 to -(totalWidth - viewportWidth). The scrub parameter ties the tween to scroll position, making every pixel of vertical scroll map to horizontal movement.
Container Animation
Panel content animates relative to the horizontal scroll using GSAP's containerAnimation parameter. Each panel's content fades and slides in when its left edge crosses 80% of the viewport, creating per-chapter entrance animations.
Progress Tracking
A fixed progress bar at the bottom and a chapter indicator in the corner update via ScrollTrigger's onUpdate callback. Both appear when the horizontal section is active and hide when it's not.
Real-World Applications
Brand Narratives
Companies like Apple and Stripe use horizontal scroll for product storytelling — each feature gets a full screen, no distractions. The pacing forces absorption over skimming.
Portfolio & Case Studies
Design agencies showcase projects in horizontal galleries. Each project occupies the full viewport — images, copy, and metrics have room to breathe without vertical competition.
Timelines & History Pages
Company histories, product evolution timelines, and year-in-review pages map naturally to horizontal movement — left is past, right is future. Spatial and intuitive.
Onboarding & Product Tours
SaaS products use horizontal scroll-driven tours to walk new users through features step by step. Each panel is a lesson — impossible to skip ahead accidentally.