# Rotating Text

> Cycles through a list of strings, animating each transition character-by-character (or word/line). Auto-advances on a timer by default; also controllable imperatively via `next()` / `previous()` / `jumpTo()` / `reset()`.

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

## Import

```angular-ts
import { WrRotatingText } from 'ngwr/rotating-text';
```

## Playground

```html
<wr-rotating-text
  [texts]="['design', 'ship', 'iterate']"
  [rotationInterval]="2000"
  splitBy="characters"
  [duration]="0.6"
  easing="cubic-bezier(0.16, 1, 0.3, 1)"
  [staggerDuration]="0"
  staggerFrom="first"
  [loop]="true"
/>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `texts`required | Strings to cycle. | `readonly string[]` | `— (required)` |
| `rotationInterval` | Auto-advance interval in ms. | `number` | `2000` |
| `splitBy` | Granularity of the split. | `'characters' \| 'words' \| 'lines'` | `'characters'` |
| `auto` | Auto-advance on a timer. | `boolean` | `true` |
| `loop` | Loop back to the first string after the last. | `boolean` | `true` |
| `duration` | Per-swap tween duration in seconds. | `number` | `0.6` |
| `easing` | CSS easing of the per-piece tween. | `string` | `'cubic-bezier(0.16, 1, 0.3, 1)'` |
| `staggerDuration` | Per-piece stagger in seconds. | `number` | `0` |
| `staggerFrom` | Stagger origin. | `'first' \| 'last' \| 'center'` | `'first'` |
| `(nextChange)` | Emits with the new index on every rotation. | `EventEmitter<number>` | `—` |
| `next() / previous() / jumpTo(i) / reset()` | Imperative methods on the component instance. | `method` | `—` |