import { Component } from '@angular/core';
import { WrSplitText } from 'ngwr/bits/split-text';
@Component({ imports: [WrSplitText] })
export class MyComponent {}Split Text
Reveals text piece by piece when it scrolls into view.
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
<!-- rootMargin is "-100px" by default, which holds the animation until the
text is 100px INSIDE the viewport. The playground overrides it so the
replay fires where the demo already sits. -->
<wr-split-text
text="Hello, ngwr!"
splitType="chars"
[delay]="40"
[duration]="1.2"
rootMargin="0px"
/>Customize
Split Type
Stagger Delay (ms)
Duration (s)
Text
Server rendering
Prerendered text stays as it is when the page hydrates. The entrance plays when the component is created in the browser and when text changes. Since v15.
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to animate. | string | — |
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. | void | — |
See also
Animation Blur TextText that blurs into place when it scrolls into view.Animation TypewriterTypes and deletes strings with a blinking cursor.Animation WavesDrifting lines behind your content that bend around the pointer.Animation Falling TextWords that fall like objects and can be dragged around.Animation Decrypt TextText that scrambles, then resolves into the real string.