stagger text

Animated component built with motion and tailwind.css to animate a series of letters with a staggered effect.

Props

• words: An array of strings representing the words to be animated.
• stagger: Optional, A number representing the delay between the animations of each letter, if not provided it will be 0.05s between each letter.
• transition: Optional, object defining the transition properties for the animation.
• direction: Optional, A string indicating the direction of the animation, if not provided it will animate from bottom.
• className: An optional string to apply additional tailwind classes.
• props: any prop associated with "<div>" element.

Behavior

• When the component is in view, it triggers the animation to change from the hidden state to the visible state in an orchestration pattern.

Example Usage

<StaggerText
  words={['Hello', 'world']}
  stagger={0.1}
  transition={{ duration: 0.5 }}
  direction=""top"
  className="my-custom-class"
/>