Animate UI

Splitting Text

A splitting text animation.

Made by imskyleen
Edit on GitHub
Splitting Text

Installation

Usage

<SplittingText text="Splitting Text" />

API Reference

SplittingText

PropTypeDefault
text
string
-
type?
'chars' | 'words' | 'lines'
chars
delay?
number
0
disableAnimation?
boolean
false
stagger?
number
-
initial?
Variant
{ x: 150, opacity: 0 }
animate?
Variant
{ x: 0, opacity: 1 }
transition?
Transition
{ duration: 0.7, ease: "easeOut" }
inView?
boolean
false
inViewOnce?
boolean
true
inViewMargin?
string
0px
...props?
HTMLMotionProps<"div">
-

Built by Skyleen. The source code is available on GitHub.