# Split Text

> Reveals text by splitting it into chars or words and staggering each piece in from a `from` state to a `to` state when the element scrolls into view. GSAP-free port — uses `IntersectionObserver` + Web Animations API.

Source: https://ngwr.dev/animations/split-text  
Kind: Animation

## Import

```angular-ts
import { WrSplitText } from 'ngwr/split-text';
```

## Playground

```html
<wr-split-text
  text="Hello, ngwr!"
  splitType="chars"
  [delay]="40"
  [duration]="1.2"
/>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | 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>` | `—` |