Splits text into characters / words for staggered entrance animation.
Every prop is wired to the controls underneath. Any change replays the animation, and the refresh button replays it on demand.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | string | "p" | HTML tag to render: "h1", "h2", "h3", "h4", "h5", "h6", "p". |
text | string | "" | The text content to animate. |
delay | number | 50 | Delay between animations for each letter (in ms). |
duration | number | 1.25 | Duration of each letter animation (in seconds). |
ease | string | "power3.out" | GSAP easing function for the animation. |
splitType | string | "chars" | Split type: "chars", "words", "lines", or "words, chars". |
from | object | { opacity: 0, y: 40 } | Initial GSAP properties for each letter/word. |
to | object | { opacity: 1, y: 0 } | Target GSAP properties for each letter/word. |
threshold | number | 0.1 | Intersection threshold to trigger the animation (0-1). |
rootMargin | string | "-100px" | Root margin for the ScrollTrigger. |
textAlign | string | "center" | Text alignment: "left", "center", "right", etc. |
| Prop | Type | Default | Description |
|---|---|---|---|
letter-animation-complete | () => void | - | Emitted when all animations complete. |
Keyboard shortcuts and ARIA behavior.