---
title: "LetterSwap — Free Framer component · Best of Framer"
description: "Free Framer component · by Aashay Agrawal · Text. letter hover animation"
canonical: "https://framer.elliotli.dev/component/letterswap"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/LetterSwap

# LetterSwap

letter hover animation

[View on Framer](https://framer.com/marketplace/components/letterswap/?via=elliot-li)

![LetterSwap preview image 1](https://framer.elliotli.dev/og/component/letterswap/afd13d56c81728be/1600x1200.jpg)

## Summary

letter hover animation

## Description

## 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-k8l65hrg-cr3R84rViQzj0iQAtBbiiuaZvNdWFO)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6849

## Details

- **Author**: Aashay Agrawal
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-25
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing