Blur Text
Isn't this so cool?!
Customize
Delay200ms
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | "" | The text content to animate. |
animateBy | string | "words" | Determines whether to animate by 'words' or 'letters'. |
direction | string | "top" | Direction from which the words/letters appear ('top' or 'bottom'). |
delay | number | 200 | Delay between animations for each word/letter (in ms). |
stepDuration | number | 0.35 | The time taken for each letter/word to animate (in seconds). |
threshold | number | 0.1 | Intersection threshold for triggering the animation. |
rootMargin | string | "0px" | Root margin for the intersection observer. |
onAnimationComplete | function | undefined | Callback function triggered when all animations complete. |
Dependencies
gsap