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.
Installation
Usage
<TextStaggerHover
as={'h2'}
className="cursor-pointer text-4xl font-bold uppercase tracking-tighter"
>
<TextStaggerHoverActive
className="opacity-20"
animation={'bottom'}
staggerDirection={'middle'}
>
Text Stagger Hover Demo
</TextStaggerHoverActive>
<TextStaggerHoverHidden animation={'bottom'} staggerDirection={'middle'}>
Text Stagger Hover Demo
</TextStaggerHoverHidden>
</TextStaggerHover>Props
TextStaggerHover
| Prop | Type | Default |
|---|---|---|
as? | ReactNode | span |
TextStaggerHoverActive
| Prop | Type | Default |
|---|---|---|
staggerDirection? | start | middle | end | start |
animation? | left | right | top | bottom | z | blur | undefined; | transform |
TextStaggerHoverHidden
| Prop | Type | Default |
|---|---|---|
staggerDirection? | start | middle | end | start |
animation? | left | right | top | bottom | z | blur | undefined; | opacity |
Rating Stars
rating stars component with customizable color, size depending on average rating.
Text Stagger Inview updated
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.