Split Text
Text Effects
GSAP SplitText-powered reveal animation with per-character, per-word, or per-line staggering and scroll trigger support.
Loading preview...
Customize
Split Type:
Ease:
Text
Stagger Delay (ms)50
Duration (s)1.25
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | The text content to animate. |
className | string | '' | Additional classes applied to the text element. |
delay | number | 50 | Stagger delay in milliseconds between split items. |
duration | number | 1.25 | Duration of each split item animation in seconds. |
ease | string | Function | 'power3.out' | GSAP easing function. |
splitType | 'chars' | 'words' | 'lines' | 'words, chars' | 'chars' | How text should be split before animation. |
from | gsap.TweenVars | { opacity: 0, y: 40 } | Initial tween values for split targets. |
to | gsap.TweenVars | { opacity: 1, y: 0 } | Target tween values for split targets. |
threshold | number | 0.1 | Visibility threshold used to trigger animation. |
rootMargin | string | '-100px' | Root margin offset used in start calculation. |
tag | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'p' | HTML tag used to render text. |
textAlign | CSSProperties['textAlign'] | 'center' | Text alignment. |
onLetterAnimationComplete | () => void | undefined | Callback fired once animation completes. |