Animate text with various effects like blur, slide, scale, and fade with granular control over words, characters, or lines.
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Folder Structure
Examples
Blur In by Text
Animate entire text with a blur-in effect.
Slide Up by Word
Animate each word with a slide-up effect.
Scale Up by Text
Animate entire text with a scale-up spring effect.
Fade In by Line
Animate text line by line with a fade-in effect.
Slide Left by Character
Animate each character with a slide-left effect.
With Delay
Add a delay before the animation starts.
With Duration
Control the total duration of the animation.
Custom Motion Variants
Use custom motion variants for complete control over the animation.
Props
TextAnimate
A component for animating text with various effects and granular control.
| Name | Type | Default | Description |
|---|---|---|---|
content | string | "" | The text content to animate (required) |
animation | "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown" | "fadeIn" | The animation preset to use |
by | "text" | "word" | "character" | "line" | "word" | How to split the text for animation |
delay | number | 0 | Delay before the animation starts (in seconds) |
duration | number | 0.3 | Total duration of the animation (in seconds) |
variants | Variants | undefined | Custom motion variants for the item animation |
startOnView | boolean | true | Start animation when component enters viewport |
once | boolean | false | Animate only once when in view |
accessible | boolean | true | Enable accessibility features (screen reader support) |
class | string | "" | Additional CSS classes to apply to the container |
segmentClass | string | "" | Additional CSS classes to apply to each segment |
Animation Presets
The component comes with the following animation presets:
- fadeIn - Simple fade in animation
- blurIn - Blur from blurred to clear
- blurInUp - Blur in with upward motion
- blurInDown - Blur in with downward motion
- slideUp - Slide in from bottom
- slideDown - Slide in from top
- slideLeft - Slide in from right
- slideRight - Slide in from left
- scaleUp - Scale from small to normal with spring
- scaleDown - Scale from large to normal with spring
Text Segmentation
Control how the text is split for animation using the by prop:
- text - Animate the entire text as one unit
- word - Animate each word separately (default)
- character - Animate each character separately
- line - Animate each line separately (split by \n)