Scroll Hijack Sections
Scroll-driven word reveal with pinned sections. Three directions: horizontal slide, vertical rise, and scale & fade. Multi-section flow with progress.
About This Effect
A scroll-driven word-by-word text reveal system with pinned sections that lock in place while content animates. Three reveal directions — horizontal slide, vertical rise, and scale with fade — create different reading experiences. Multiple sections chain together with a shared progress indicator, creating immersive storytelling sequences that feel native to the scroll.
What's Included
- Word-by-word reveal tied directly to scroll position
- Three reveal directions: horizontal, vertical, and scale
- Pinned section behavior using ScrollTrigger pinning
- Multi-section chaining with shared progress indicator
- Scrub-based animation that reverses when scrolling up
- Configurable scroll distance per section for pacing control
- Smooth word transitions with opacity and transform easing
- Lenis integration for enhanced scroll smoothness
Perfect For
- Brand storytelling and mission statement pages
- Product feature walkthroughs and onboarding flows
- Annual report and data visualization narratives
- Case study presentations with progressive reveals
- Immersive editorial and long-form content experiences
How It Works
Each section is pinned using ScrollTrigger's pin feature, which locks it in the viewport while the user scrolls. The scroll progress maps to word indices — as progress increases, more words transition from hidden to visible. The reveal direction determines whether words slide in horizontally, rise vertically, or scale from small to full size. Sections chain by starting each pin trigger where the previous one ends.