Text Swap Animation
Text Swap Animation animates text by cycling through an array of words with smooth transitions. The scramble effect, it displays one complete word at a time and transitions .
Made with Workshop
Build your own component with AI
About this Component
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:
Word Management: Takes a comma-separated list of words, displays one at a time, and cycles through all words in a continuous loop.
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.
Trigger Modes: Supports On Load (immediate start), On Hover (activates on mouse over), In View (scroll-triggered), and Continuous (infinite auto-play loop).
State Management: Tracks current word index with useRef to prevent conflicts, implements proper cleanup, and uses AnimatePresence for smooth transitions.
Responsive Behavior: Optional viewport-based font sizing with min/max constraints that maintains aspect ratio and prevents overflow.
