LetterSwap

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