Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrRotatingText } from 'ngwr/rotating-text';Playground
We design every day.
<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"
/>Customize
Interval (ms)
Split By
Duration (s)
Easing
Stagger (s)
Stagger From
Loop
API
| Name | Description | Type | Default |
|---|---|---|---|
textsrequired | 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 | — |