Back to Gallery
Split Text Stagger Reveal
£5 Standard License Unlimited projects
Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle.
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
- 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
- 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
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
