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.
Installation
Usage
<TextStaggerInview
animation={'blur'}
className="overflow-hidden text-4xl tracking-tight font-bold"
stagger={0.03}
>
Stagger Text Inview Demo
</TextStaggerInview>Props
| Prop | Type | Default |
|---|---|---|
as? | ReactNode | span |
animation? | left | right | top | bottom | z | blur | undefined; | opacity |
staggerDirection? | 1 | -1 | 1 |
stagger? | number | 0.02 |
Hover Stagger Text Animation
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 Vertical
Text with vertical display, Can be used as a title or a subtitle.