LetterSwap

letter hover animation

About this Component 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 1.Forward Plays the animation once on hover. Best for quick, expressive hover interactions. 2.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. Property Controls

letter hover animation