Animate Text
A text animation action that animates text using a variety of different animations.
Animated Text
Installation
Usage
Blur In Animation by Character
Animated Text
Blur In Animation by Word
Word by word blur in
import { blurIn } from '$lib/components/ori/text-animations/animate-text';<h1 use:blurIn={{ duration: 1 }}>Animated Text</h1>Props (blurIn action options)
| Prop | Type | Default | Description |
|---|---|---|---|
| by | 'character' | 'word' | 'word' | Whether to animate by individual characters or words |
| once | boolean | false | If true, the animation plays once per element in-view |
| stagger | number | undefined | Delay between each character/word animation (seconds) |
| duration | number | undefined | Duration of each element’s animation (seconds) |
Additional motion.dev AnimationOptions are also accepted.