---
title: "Gsap Text Effects — Free Framer component · Best of Framer"
description: "Free Framer component · by Victor Adekunle · Text. Awesome Text Reveal Animation with GSAP"
canonical: "https://framer.elliotli.dev/component/gsap-text-animator"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Gsap Text Effects

# Gsap Text Effects

Awesome Text Reveal Animation with GSAP

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

![Gsap Text Effects preview image 1](https://framer.elliotli.dev/og/component/gsap-text-animator/1529ee42d894de6f/1600x1200.jpg)

## Summary

Awesome Text Reveal Animation with GSAP

## Description

### About This Component

**GSAP Text For Framer** is a high-performance, scroll-driven typography component designed for Framer. It leverages the power of GSAP (GreenSock) to transform standard text into a cinematic experience. Whether it’s a staggered character entrance or a "scrub" effect that highlights text as you scroll, this component brings professional-grade motion to your layout with zero coding required.

Discover more premium components

[https://www.framer.com/@victor-adekunle/](https://www.framer.com/@victor-adekunle/)

### Key Features

-   Choose from **9 professional animation modes** to bring your typography to life. Each mode is optimized for high-end digital experiences:
    
    -   **Stagger Up & Down**: Elegant vertical reveals where letters or lines enter sequentially from above or below.
        
    -   **Slide in Left & Right**: Modern horizontal reveals that glide text into position from either side.
        
    -   **Scroll Reveal**: An interactive highlighting effect that illuminates text as the user scrolls down the page.
        
    -   **Elastic Pop**: A playful, physics-based entrance with a bouncy overshoot for high-energy sections.
        
    -   **Portal**: A cinematic "duplicate" effect where characters slide out of a hidden mask to replace their clones.
        
    -   **Wave**: A fluid, rhythmic motion that creates a rolling wave effect across the sentence.
        
    -   **Flow**: A sophisticated 3D-tilt entrance that combines scaling and rotation for a premium feel.
        
-   **Precision Splitting (Characters vs. Words)** The engine intelligently switches between chars and words splitting based on your animation type, ensuring every letter or phrase moves with mathematical precision.
    
-   **Dynamic Scroll Scrubbing** In Scrub mode, text transitions from a "Base Opacity" to your "Highlight Color" based on the viewport position. You control exactly where the animation starts and ends via percentage sliders.
    
-   **Integrated Motion Blur** Toggle a high-end Gaussian blur effect that syncs with the movement, mimicking the look of professional film credits and high-end agency sites.
    
-   **Multi-Instance Scoping** Built with gsap.context, the component is engineered to work perfectly even if you have 10+ instances on a single page—no animation collisions or "freezing" bugs.
    
-   **SEO-Friendly Tagging** Stay rank-ready by selecting your HTML tag (H1 through P) directly in the properties panel without affecting the animation logic.
    
-   **Optimized Canvas Performance** The component intelligently detects when you are in the Framer Canvas, showing a clean, static preview for a frustration-free design experience.
    

### Use Cases

-   **Hero Headlines:** Use "Stagger (Up)" to grab attention immediately on page load.
    
-   **Narrative Sections:** Use "Scroll Scrub" to keep users engaged as they read through long-form mission statements.
    
-   **Feature Callouts:** Use "Side Slide" to introduce new sections with a sense of direction and energy.
    

### Key Benefits

-   **Native Framer Workflow:** Unlike other code components that force you to use a separate UI, this engine works directly with **Framer Text Properties**. Adjust fonts, weights, and colors using the panels you already know.
    
-   **Performance First:** Built with optimized GSAP context and splitting logic, ensuring high frame rates (60fps+) even on content-heavy pages.
    

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

-   All · #3919

## Details

- **Author**: Victor Adekunle
- **Published**: 2026-02-09
- **Updated**: 2026-06-14
- **Added**: 2026-01-30
- **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