Split Text
Code
| 1 | // Declarative SplitText + SplitTextEntry + AnimeTimeline. The animation is |
| 2 | // bound to the split elements themselves, so it reliably targets characters. |
| 3 | const timelineRef = useRef<AnimeTimelineRef>(null); |
| 4 | const splitRef = useRef<SplitTextRef>(null); |
| 5 | |
| 6 | <AnimeTimeline ref={timelineRef} autoplay={false} defaults={{ ease: 'outBack', duration: 600 }}> |
| 7 | <SplitText ref={splitRef} params={{ lines: true, words: true, chars: true }}> |
| 8 | <p>SplitText</p> |
| 9 | </SplitText> |
| 10 | |
| 11 | <SplitTextEntry |
| 12 | splitRef={splitRef} |
| 13 | splitMode="chars" |
| 14 | opacity={[0, 1]} |
| 15 | translateY={[40, 0]} |
| 16 | scale={[0.8, 1]} |
| 17 | stagger={40} |
| 18 | /> |
| 19 | </AnimeTimeline> |
| 20 | |
| 21 | // Re-trigger: timelineRef.current?.controls.restart() |
Declarative text splitting into chars/words/lines, animated via SplitTextEntry inside an AnimeTimeline.
Live previewOpen Playground
SplitTextCharacter text splitting
SplitText
Props
| Name | Type | Default | Description |
|---|---|---|---|
| params | object | - | What to split: { lines, words, chars } |
| splitMode | 'chars'|'words'|'lines' | - | Which split units SplitTextEntry animates |
| translateY | number[] | [40, 0] | Per-unit rise |
| scale | number[] | [0.8, 1] | Per-unit scale |
| stagger | number | 40 | Delay ripple between units |
| defaults.ease | string | 'outBack' | Timeline-wide easing |
| autoplay | boolean | false | false = trigger via controls.restart() |