Back to Gallery
Scroll Hijack Sections
£5 Standard License Unlimited projects
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.
About This Effect
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.
Read the full effect overview
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.
What's Included
- 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
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 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.
Plugins ScrollTrigger
Difficulty Intermediate
Smooth Scroll Lenis Integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
