Docs
Text Animate

Text Animate

A text animation component that animates text using a variety of different animations.

Blur in text

Installation

Examples

Blur In by Text

Blur in text

Slide Up by Word

Slide up by word

Props

PropTypeDefaultDescription
childrenstring-The text content to animate
classNamestring-The class name to be applied to the component
delaynumber0Delay before animation starts
durationnumber0.3Duration of the animation
variantsVariants-Custom motion variants for the animation
asElementType"p"The element type to render
by"text" | "word" | "character" | "line""word"How to split the text ("text", "word", "character")
startOnViewbooleantrueWhether to start animation when component enters viewport
oncebooleanfalseWhether to animate only once
animationAnimationVariant"fadeIn"The animation preset to use