---
title: "Text Out Anim — Free Framer component · Best of Framer"
description: "Free Framer component · by Shantanu · Text. Text with actual out-animation"
canonical: "https://framer.elliotli.dev/component/text-out-anim"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Out Anim

# Text Out Anim

Text with actual out-animation

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

![Text Out Anim preview image 1](https://framer.elliotli.dev/og/component/text-out-anim/8fd6bb30895d580b/1600x1200.jpg)

## Summary

Text with actual out-animation

## Description

The goal of this component is to achieve proper out animation by having an additional layer of visibility toggle on component level, allowing the animation to play through. I’m sure Framer team will natively provide a solution for this but until then, this works pretty well :)

### What you need to know

1.  It works best for text animation inside buttons. So you can create a button component and use 2 Text With Out Anim components instead of the native text layers.
    
2.  Set these 2 components to absolute position (should be pinned to left)
    
3.  First component (let’s call it Text A) will have its visibility toggle set to Yes (not to be confused with the native visibility toggle)
    
4.  Second component (Text B) will have its visibility set to No
    
5.  Create a new variant and swap the visible states.
    
6.  Update the content within both components and that’s it!
    
7.  For fine-tuning of the animation, various controls are provided in the properties panel (right-hand side)
    

### Customization Options

You can fine-tune the animation with the following options:

1.  Text Typography
    
2.  Text Color
    
3.  Entry Speed
    
4.  Exit Multiplier (Staggering Speed while exiting)
    
5.  Exit Direction
    
6.  Blur (Both in and out animation)
    
7.  Entry Offset X
    
8.  Entry Offset Y
    
9.  Exit Offset X
    
10.  Exit Offset Y
     

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

-   All · #2114

## Details

- **Author**: Shantanu
- **Published**: 2026-04-24
- **Updated**: 2026-04-24
- **Added**: 2026-04-03
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos