Text Stagger Interval

Splitted text animation with interval

Open in 21st dev
Loading...

Installation

Usage

<TextStaggerInterval
  words={['Modern UI', 'Creative Layouts', 'Dynamic Sites', 'Sleek Designs']}
  animation={'blur'}
  staggerValue={0.05}
  interval={3000}
  pauseOnHover={false}
/>

Props

PropTypeDefault
pauseOnHover?
boolean
true
interval?
number
2000
staggerValue?
number
0.03
animation?
left | right | top | bottom | z | blur | undefined;
opacity
words
string[]
transform

Text Stagger Hover updated

Splitted text animation with staggered reveal triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, blur) and the stagger value, and the transition.

Text Stagger Inview

Splitted text animation with staggered reveal animation triggered by view, You can easily customize by controlling the animation property (transform, opacity, blur) and the stagger value, and the transition.