Split Text Stagger Reveal
Split text into characters, words, or lines with staggered reveal animations. Styles include fade, scale, blur, rotate, and clip mask effects.
About This Effect
A comprehensive text splitting and animation system that breaks content into characters, words, or lines, then applies staggered reveal animations as elements scroll into view. Includes seven distinct animation styles — fade, scale, blur, rotate, clip mask, slide, and elastic — each with fine-tuned timing curves. Built on GSAP SplitText for reliable text splitting across fonts and languages.
What's Included
- Three split modes: characters, words, and lines
- Seven animation styles with distinct visual personalities
- ScrollTrigger integration with configurable start and end points
- Hover and tap mode for interactive text reveals
- Customizable stagger timing, direction, and easing
- Automatic revert on resize for responsive text reflow
- Clip mask animations using overflow hidden technique
- Lenis-compatible smooth scroll integration
Perfect For
- Hero section headline reveals
- Section titles that animate as users scroll through content
- Interactive navigation with character-level hover effects
- Storytelling pages with progressive text unveiling
- Landing page copy that draws attention line by line
How It Works
GSAP SplitText divides the text node into individually addressable spans for each character, word, or line. ScrollTrigger watches for viewport entry and triggers a GSAP timeline with staggered animations on each split element. The stagger configuration controls the delay between elements, while the animation style determines the from-state properties like opacity, scale, rotation, or clip-path.