Text Swap Animation

Create engaging, dynamic text animations by smoothly cycling through multiple words.

Create engaging, dynamic text animations by smoothly cycling through multiple words. Perfect for hero sections, taglines, and anywhere you want to add motion to your messaging.

Features:

• Continuous word rotation with customizable timing

• Multiple trigger options: On Load, On Hover, In View, or Continuous

• Full typography controls (font, size, color, weight)

• Responsive font sizing with min/max constraints

• Performance optimized with proper cleanup

• Easy to customize with intuitive property controls

How It Works:

1. Word Management: Takes a comma-separated list of words, displays one at a time, and cycles through all words in a continuous loop.

2. Animation System: Current word fades out with directional slide while next word fades in from opposite direction, with smooth configurable timing and no layout shift.

3. Trigger Modes: Supports On Load (immediate start), On Hover (activates on mouse over), In View (scroll-triggered), and Continuous (infinite auto-play loop).

4. State Management: Tracks current word index with useRef to prevent conflicts, implements proper cleanup, and uses AnimatePresence for smooth transitions.

5. Responsive Behavior: Optional viewport-based font sizing with min/max constraints that maintains aspect ratio and prevents overflow.