Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrSplitText } from 'ngwr/split-text';Playground
<wr-split-text
text="Hello, ngwr!"
splitType="chars"
[delay]="40"
[duration]="1.2"
/>Customize
Split Type
Stagger Delay (ms)
Duration (s)
Text
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to animate. | string | — (required) |
splitType | Split granularity. | 'chars' | 'words' | 'chars' |
delay | Stagger delay between pieces in ms. | number | 50 |
duration | Animation duration in seconds. | number | 1.25 |
easing | CSS easing function. | string | 'cubic-bezier(0.16, 1, 0.3, 1)' (~power3.out) |
from | Start state for each piece. Properties: opacity, x, y (px), scale, rotate (deg). | WrSplitTextMotion | { opacity: 0, y: 40 } |
to | End state for each piece. Same shape as from. | WrSplitTextMotion | { opacity: 1, y: 0 } |
threshold | IntersectionObserver threshold (0..1). | number | 0.1 |
rootMargin | IntersectionObserver rootMargin. | string | '-100px' |
textAlign | Text alignment on the host. | 'left' | 'center' | 'right' | 'justify' | 'center' |
(animationComplete) | Emitted once all pieces finish animating. | EventEmitter<void> | — |