011
AI ready

Scroll Hijack Sections

£5

Five pinned editorial chapters that assemble word by word as you scroll. Slides from both edges, a vertical rise and a blur-to-sharp reveal, with a velocity lean that settles after every flick.

ScrollTrigger Lenis intermediate
4 more details
scroll-hijacktext-animationpinningscrub
Scroll Hijack Sections - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Scroll Hijack Sections demo in new tab

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

9 items
  • 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

5 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

How it works

2 sections

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

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Scroll Hijack Sections opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML (just two elements needed):

Code snippet omitted: it ships with the download.

All h1-h6 and p tags inside the section are auto-detected and animated.

Using It With Your Own Design

What the effect requires of your markup: a [data-word-reveal] wrapper with a .word-reveal-section inside it. That section is the thing that gets pinned, so it has to be one viewport tall. Everything else inside is yours.

The text elements it animates are destroyed and rebuilt: each one's textContent is re-emitted as <span class="word"> per word. Any markup inside a revealing element — a <strong>, a link, an icon — is lost. Mark the specific elements with data-reveal-text and leave the rest alone, or accept the auto-detection of every h1-h6 and p in the section.

What is only the demo's CSS. The five editorial chapters, charcoal surfaces, orange type, chapter headers and footers, and progress rail styling are all dressing you can replace. The demo uses Mona Sans and one accent token. What the effect needs from the stylesheet is:

  • .word-reveal-section { height: 100vh }. The pin measures this. A section taller than the viewport will not sit still.
  • Keep .sr-only: it visually hides the uninterrupted screen-reader copy while the generated visual words carry aria-hidden="true".
  • The three .word start states. The property CSS sets and the property GSAP tweens must be the same one. translateX(100vw) is parsed into GSAP's x, which is what the horizontal tween animates back to 0; swapping the CSS to xPercent while the tween still targets x leaves the words permanently offset.
  • .word-reveal-wrapper must not have a height. ScrollTrigger's pin spacer supplies exactly the scroll the pin needs; adding your own height on top puts a viewport of nothing between one chapter and the next.
  • Nothing is pre-hidden in the source markup: the start states apply only to .word spans, which do not exist until the script creates them. With JavaScript off, every chapter is plain readable text.

The non-obvious parts:

  • Words are grouped by the line they actually render on, measured after document.fonts.ready. The stagger therefore follows real line breaks at any width, but it also means the effect must run after your fonts load.
  • data-reveal-on="load" exists for the first section on a page. A scrubbed section at the very top of the document has no scroll above it, so it would sit blank until the visitor moves.
  • The velocity lean writes skewY on every word and a blur() on the text blocks. If you animate either yourself on the same elements, set data-velocity="0".

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

Directions

HTML: Code snippet omitted: it ships with the download.

Alternate the entry edge down a sequence so two chapters in a row never arrive the same way. data-from="left" also right-aligns the content, because a line travelling in from the left edge reads better landing against the right one.

The effect flips the stagger order to match: entering from the left, words settle from the end of the line back. Without that, every word still in flight crosses straight through the ones that have already landed.

Accessibility

  • prefers-reduced-motion respected - text shows immediately
  • Animated text keeps an uninterrupted screen-reader copy; generated word spans are hidden from screen readers
  • With JavaScript disabled, all five chapters remain readable
  • Semantic HTML (headings, paragraphs)

Mobile

  • Blur disabled on the scale direction for performance
  • Fluid typography with clamp()
  • Scroll distances are in viewport heights, so they scale with the device

Dependencies

  • GSAP 3.12+
  • ScrollTrigger plugin
  • Lenis (optional - for smooth scrolling)

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

Horizontal scroll sections with GSAP ScrollTrigger

Build a pinned horizontal scroll section with GSAP ScrollTrigger: pin, scrub, and a track that slides sideways as you scroll. Complete code included.

Staggered grid reveal in WordPress with GSAP

Animate a grid of cards into view with a staggered scroll reveal in WordPress using GSAP and ScrollTrigger. Directional stagger, no plugin required.

Adding an Infinite Marquee to WordPress

Build a smooth infinite marquee for WordPress using GSAP. Scrolling text, logo strips, and ticker bars with no plugin required.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.