import { Component } from '@angular/core';
import { WrRotatingText } from 'ngwr/bits/rotating-text';
@Component({ imports: [WrRotatingText] })
export class MyComponent {}Rotating Text
Cycles through a list of words in one place.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
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[] | — |
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. | number | — |
next() / previous() / jumpTo(i) / reset() | Imperative methods on the component instance. | method | — |