# Split Text Stagger Reveal > Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle. Canonical: https://gsapvault.com/effects/split-text-reveal Live demo: https://gsapvault.com/demos/split-text-reveal/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger, SplitText | | Techniques | text-animation, stagger, 3d-transforms, scroll-reveal, hover-effect | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## 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 ## 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 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. ## 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 the stylesheet and the optional pre-paint gate inside your HTML ``:** ```html ``` **2. Add a reveal target to your HTML ``:** ```html

MAKE IT MOVE

``` **3. Add GSAP, SplitText, optional ScrollTrigger, and the effect before ``:** ```html ``` ScrollTrigger is only required when using `data-split-reveal-scroll`. SplitText is free with GSAP. ### 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. | ### 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.14.2+ - SplitText 3.14.2+ - ScrollTrigger 3.14.2+ only for scroll-triggered reveals - No Lenis dependency ## 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 Split Text Stagger Reveal](https://gsapvault.com/effects/split-text-reveal) - [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): - [Typewriter Text](https://gsapvault.com/effects/typewriter-text.md): A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals. - [Scroll Text Highlight](https://gsapvault.com/effects/scroll-text-highlight.md): A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt