Text Out Anim — Text with actual out-animation

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