---
title: "Text Swap Animation — Free Framer component · Best of Framer"
description: "Free Framer component · by Shovo Poddar · Text. Create engaging, dynamic text animations by smoothly cycling through multiple words."
canonical: "https://framer.elliotli.dev/component/text-swap-animation"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Swap Animation

# Text Swap Animation

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

![Text Swap Animation preview image 1](https://framer.elliotli.dev/og/component/text-swap-animation/436562b1e943a121/1600x1200.jpg)

## Summary

Create engaging, dynamic text animations by smoothly cycling through multiple words.

## Description

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:

1.  **Word Management:** Takes a comma-separated list of words, displays one at a time, and cycles through all words in a continuous loop.
    
2.  **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.
    
3.  **Trigger Modes:** Supports On Load (immediate start), On Hover (activates on mouse over), In View (scroll-triggered), and Continuous (infinite auto-play loop).
    
4.  **State Management:** Tracks current word index with useRef to prevent conflicts, implements proper cleanup, and uses AnimatePresence for smooth transitions.
    
5.  **Responsive Behavior:** Optional viewport-based font sizing with min/max constraints that maintains aspect ratio and prevents overflow.
    

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

-   All · #6749

## Details

- **Author**: Shovo Poddar
- **Published**: 2025-12-12
- **Updated**: 2025-12-11
- **Added**: 2025-12-07
- **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