007
AI ready

Split Text Stagger Reveal

£5

Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle.

ScrollTriggerSplitText intermediate
5 more details
text-animationstagger3d-transformsscroll-revealhover-effect
Split Text Stagger Reveal - 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 Split Text Stagger Reveal demo in new tab

About this effect

A cinematic display-text effect that splits a headline into characters, drives them upward through a mask, and resolves 3D rotation, blur, opacity, and configurable color fringing into a crisp final lockup. The included generic API also supports restrained directional, scale, blur, and rotate presets for headlines beyond the showcase.

What's included

8 items
  • Cinematic preset combining opacity, yPercent, rotationX, rotationZ, blur, and color fringe
  • Character, word, and line split modes powered by GSAP SplitText
  • Fast power4 settle with configurable duration, stagger, direction, and easing
  • Generic auto, scroll, hover, focus, touch, and replay hooks
  • Font-ready initialization and responsive SplitText re-splitting
  • Public SplitTextReveal class with reveal, replay, hide, refresh, and destroy methods
  • No-JavaScript and reduced-motion fallbacks that keep every headline readable
  • Scoped timelines, event cleanup, SplitText revert, and owned ScrollTrigger cleanup

Perfect for

5 use cases
  • Film and production hero titles with an editorial entrance
  • Fashion campaign headlines with a sharp cinematic resolve
  • Creative studio landing pages that need a high-impact first beat
  • Event openers and launch pages with oversized display typography
  • Editorial features that reveal titles by character, word, or line

How it works

1 section

After document fonts settle, GSAP SplitText creates character, word, or line targets and the selected preset supplies matched from/to states. The cinematic preset staggers masked yPercent movement while power4 easing simultaneously resolves opacity, 3D rotation, blur, and CSS-variable color fringes. Replay controls target any reveal through a documented selector hook; resize, reduced-motion, blocked-CDN, and teardown paths revert the split text and preserve readable content.

Plugins ScrollTrigger, SplitText
Difficulty Intermediate
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 Split Text Stagger Reveal 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 the stylesheet and the optional pre-paint gate inside your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add a reveal target to your HTML <body>:

Code snippet omitted: it ships with the download.

3. Add GSAP, SplitText, optional ScrollTrigger, and the effect before </body>:

Code snippet omitted: it ships with the download.

ScrollTrigger is only required when using data-split-reveal-scroll. SplitText is free with GSAP.

Using It With Your Own Design

The effect requires only a text element carrying data-split-reveal, GSAP, and SplitText. A trigger hook chooses when it runs; data-split-reveal-auto is the smallest setup. The cinematic preset looks best when a wrapping element clips the moving glyphs and the split target itself provides perspective:

Code snippet omitted: it ships with the download.

For a multi-line editorial lockup, wrap each designed line in a block with overflow: hidden, as the demo does; the same trick masks fade-left line reveals if you put overflow: hidden on the paragraph itself.

Two pieces of CSS are not decoration and are easy to miss:

  • The .has-js pre-hide gate above. Without it the untouched text paints at full size and then jumps to the reveal's start state. It is gated on the class so a visitor with no JavaScript, or a blocked CDN, still sees the text.
  • display on line targets. The script sets display: inline-block on every split target, which is what chars and words need and what lines must not have, or the lines flow into each other. When you use data-split-reveal-type="lines", add:

Code snippet omitted: it ships with the download.

Everything else in the demo is presentation: the grey ground, the blue accent, the Mona Sans display type, the masthead, the passage rules, the replay button and the spacing. Delete or replace them freely. script.js queries only the documented behavior hooks below and does not depend on any demo class.

Options

Attribute Values Default Description
data-split-reveal present — Marks a text element as a reveal target.
data-split-reveal-type chars, words, lines chars SplitText target type.
data-split-reveal-style cinematic, fade-up, fade-down, fade-left, fade-right, scale, blur, rotate fade-up Animation preset.
data-split-reveal-stagger seconds 0.035 cinematic; 0.03 other Delay between split targets.
data-split-reveal-direction forward, reverse, center, edges, random forward Stagger origin.
data-split-reveal-duration seconds 0.82 cinematic; 0.62 other Duration for each target.
data-split-reveal-ease GSAP ease power4.out cinematic; power3.out other Settle curve.
data-split-reveal-delay milliseconds 0 Delay before each reveal starts.

Trigger Hooks

Attribute Behavior
data-split-reveal-auto Reveals after fonts are ready.
data-split-reveal-scroll Reveals at top 85% and resets when scrolling back. Requires ScrollTrigger.
data-split-reveal-hover Replays on pointer hover, keyboard focus, or touch.
data-split-reveal-replay="selector" On a button or link, replays every reveal matching the CSS selector.

Triggers can be combined. Use a real <button> for replay so keyboard operation works without extra code.

Font Timing, Resize, and Cleanup

Initialization waits for document.fonts.ready before SplitText measures the headline. A debounced resize handler reverts and rebuilds each split so line and character positions follow responsive type changes. destroy() kills the instance timeline and calls SplitText.revert(); the page-level teardown also removes every registered listener, delayed call, owned ScrollTrigger, and split instance.

If your application swaps fonts after initial load, call instance.refresh() after the new font's FontFace.load() promise resolves.

Accessibility

  • Reduced-motion visitors receive the complete, sharp title without animation in both CSS and JavaScript.
  • If GSAP or SplitText is blocked, the script removes .has-js so the original text remains visible.
  • With JavaScript disabled, the head gate never runs and the original document stays readable.
  • Replay uses a native button, and hover-triggered reveals also respond to focus and touch.
  • SplitText reverts to the original semantic text during cleanup.

Browser Support

Modern browsers with ES2015 support. Internet Explorer 11 is not supported.

Dependencies

  • GSAP 3.15.0+
  • SplitText 3.15.0+
  • ScrollTrigger 3.15.0+ only for scroll-triggered reveals
  • No Lenis dependency

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

Related articles

Shopify custom animations with GSAP

Add GSAP animations to a Shopify theme: where the code goes, how to survive theme editor section reloads, and a scroll-reveal collection grid.

108 GSAP animation examples and demos with code (2026)

108 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Nine are completely free with copy-paste snippets below.

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.