Details
Letter Swap is a text animation component that swaps individual letters vertically on hover.
It creates the effect by duplicating the text, splitting it into individual characters, and animating each letter inside an overflow-hidden container.
The component supports two animation modes: Forward and Ping Pong.
Forward animation plays the letter swap once when the user hovers over the text.
Ping Pong animation plays forward on hover and reverses when the user moves away.
It is ideal for interactive links, menus, buttons, headings, portfolio websites, landing pages, and refined typography details.
Key Features
Custom text label
Vertical letter-swap animation
Forward animation mode
Ping Pong animation mode
Reverse direction control
Custom transition settings
Adjustable stagger duration
Stagger from first, center, last, or custom index
Supports additional CSS classes
Click event support
Smooth hover-based interaction
Accessible hidden text label support
Animation Styles
Forward
Plays the animation once on hover.
Best for quick, expressive hover interactions.
Ping Pong
Animates forward on hover and reverses on hover out.
Best for links, menus, and interactive UI text that needs a responsive hover state.
Best Used For
Navigation links
Header menus
Landing page CTAs
Portfolio links
Interactive headings
Footer links
Editorial typography
Studio websites
Creative portfolios
Minimal interaction design
Aashay Agrawal
