# Scroll Hijack Sections > Pinned chapters that hold the viewport while their words assemble on the scroll, with a velocity lean that smears the whole block on a flick. Three directions: slide, rise, and scale through a blur. Canonical: https://gsapvault.com/effects/scroll-hijack-sections Live demo: https://gsapvault.com/demos/scroll-hijack-sections/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | scroll-hijack, text-animation, pinning, scrub | | Uses Lenis | Yes | ## Overview A scroll-driven word reveal with pinned sections that lock in place while their sentences assemble line by line. Three reveal directions — horizontal slide, vertical rise, and scale through a blur — give the same system three different reading rhythms, set per section. On top of the scrub sits a second input: scroll velocity. A slow scroll assembles the words calmly; a hard flick skews every word in the direction of travel and blurs the block, then eases it back upright. Chapters chain with no dead scroll between them, each one holds the finished statement for a beat before releasing, and the first can reveal on load so the section is never blank on arrival. ## Features - Word-by-word reveal tied directly to scroll position - Three reveal directions: horizontal, vertical, and scale-through-blur - Horizontal slide enters from either edge, with the stagger order flipped to match - Velocity lean — a flick skews and blurs the block, then settles it - Pinned sections that chain with no empty scroll between chapters - data-reveal-on="load" for the opening section, so it is never blank - Scrub-based animation that reverses when scrolling up - Per-section scroll distance, hold, stagger, direction and lean strength - Multi-section chaining with an automatic progress rail ## Use Cases - 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 ## 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 Each section is pinned with ScrollTrigger for a distance you set in viewport heights, and pinSpacing supplies exactly that much scroll room so the next chapter starts pinning the frame after this one releases. The reveal is mapped across only part of that range — data-hold reserves the rest, so the completed statement sits still under the pin instead of releasing the moment the last word lands. The words are wrapped in spans, grouped by the line they actually render on, and scrubbed from a CSS start state back to rest with a per-line stagger — so the reveal follows the real line breaks at any width. The velocity lean reads ScrollTrigger's getVelocity() and writes a clamped skew through a proxy object that a power3 tween is always easing back to zero. That is what makes it settle: the tween owns the value, so the lean relaxes on its own the moment you stop scrolling, and is only overridden by a faster flick. ## 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 to your HTML ``:** ```html ``` **2. Add before closing `` tag:** ```html ``` **3. Add the effect HTML (just two elements needed):** ```html

Your heading animates automatically

Paragraphs too. No extra attributes needed.

``` All `h1-h6` and `p` tags inside the section are auto-detected and animated. ### Options | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-word-reveal` | flag | — | Enables effect | | `data-direction` | `horizontal`, `vertical`, `scale` | `horizontal` | Animation style | | `data-stagger` | seconds | `0.15` | Delay between words | | `data-scroll-distance` | vh | `200` | How long the section stays pinned | | `data-hold` | `0`–`0.9` | `0.3` | Share of the pin kept back after the last word lands | | `data-from` | `right`, `left` | `right` | Which edge the `horizontal` slide comes from | | `data-reveal-on` | `scroll`, `load` | `scroll` | Scrub with the scroll, or play once on load | | `data-velocity` | number | `1` | Strength of the flick lean. `0` disables it | ### Accessibility - `prefers-reduced-motion` respected - text shows immediately - All text readable even before animation completes - Semantic HTML (headings, paragraphs) ### Dependencies - GSAP 3.12+ - ScrollTrigger plugin - Lenis (optional - for smooth scrolling) ## 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 Hijack Sections](https://gsapvault.com/effects/scroll-hijack-sections) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](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