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.

Open in 21st dev

Select Animation

Select Stagger Direction

Text Stagger Hover Demo Text Stagger Hover Demo

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`