Text Stagger Hover
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.
this component has been updated: - remove context for better performance - remove absolute Positioning so you can apply padding on the parent component - same old usage
Loading...
Installation
Usage
<TextStaggerHover className="cursor-pointer text-4xl font-bold uppercase tracking-tighter p-2">
<TextStaggerHoverActive
className="opacity-20"
transition={{ duration: 0.3, ease: 'easeOut' }}
>
Text Stagger Hover Demo
</TextStaggerHoverActive>
<TextStaggerHoverHidden transition={{ duration: 0.3, ease: 'easeOut' }}>
Text Stagger Hover Demo
</TextStaggerHoverHidden>
</TextStaggerHover>Props
<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 |