---
title: "Text Reveal Animated — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Daniyal Habib · Text. Text Reveal Animated — Scroll & On-Load Text Animation for Framer A scroll-triggered and on-load text reveal component for Framer."
canonical: "https://framer.elliotli.dev/component/mask-text-reveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Reveal Animated

# Text Reveal Animated

Lines, words & chars reveal

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

![Text Reveal Animated preview image 1](https://framer.elliotli.dev/og/component/mask-text-reveal/a577adb032073658/1600x1200.jpg)

## Summary

Text Reveal Animated — Scroll & On-Load Text Animation for Framer A scroll-triggered and on-load text reveal component for Framer.

## Description

## Text Reveal Animated — Scroll & On-Load Text Animation for Framer

A scroll-triggered and on-load text reveal component for Framer. Animate headings, paragraphs, hero text, and CTAs with masked line reveals, per-word stagger, and per-character entrance effects — all without writing a single line of code.

### Trigger Types

-   **On Load / Appear** — animation fires the moment the page renders
    
-   **On Scroll / Layer in View** — triggers when the element enters the viewport
    
-   **Scroll start position** — choose top, center, or bottom of viewport
    
-   **Replay** — resets and re-triggers every time the element scrolls back into view
    

### Split Modes

-   **Lines** — classic masked line reveal with overflow hidden
    
-   **Words** — word-by-word stagger entrance
    
-   **Characters** — per-character animation, ideal for short headings and single words
    

### Animation Properties

-   Opacity fade-in (0–1)
    
-   Y offset / slide up, slide down (px)
    
-   X offset / slide left, slide right (px)
    
-   Rotation entrance (±360°)
    
-   Scale entrance (0–2×)
    
-   Motion blur (0–20px)
    
-   Stagger delay between each element (0–2s)
    

### Transitions:

Uses Framer's built-in Transition property control — the same transition picker you already use across your project. Set spring or tween, duration, easing, delay, damping, stiffness, mass, and bounce. No custom inputs, no learning curve.

### Eyebrow Label:

Add an optional inline label with its own font, size, color, weight, and margin — perfect for section tags, eyebrow text, category labels, or decorative text sitting alongside your main heading.

### HTML Tag Control:

Set the semantic HTML tag (h1–h6, p, div, span) directly from the panel for correct document hierarchy and accessibility.

### Text Indent:

Optional first-line indent for editorial and editorial-style layouts.

### Performance:

GSAP SplitText handles all DOM splitting. GPU-accelerated CSS transforms. Smooth 60fps rendering across all modern browsers with no layout thrashing or reflow.

### Use Cases:

Hero headings · Landing page headlines · Scroll storytelling · Portfolio introductions · Feature section headings · About pages · Product descriptions · Agency websites · SaaS marketing pages · App landing pages · Personal sites · Coming soon pages · Event pages · eCommerce headers

### Technical

-   Built with GSAP + SplitText
    
-   Framer Motion + React
    
-   Fully responsive, adapts to any text length
    
-   60fps GPU-accelerated transforms
    
-   All modern browsers supported
    
-   Zero external dependencies at runtime
    

### Properties

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3on2h0xn-kUzVBl6UGxtnSMHsEHDu9u5Ou8sxnN)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-zcybvu2u-17xiBaltu0Mg75TNqHI8FF8uYpOolu)

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

-   All · #134

## Details

- **Author**: Daniyal Habib
- **Price**: $6.00
- **Published**: 2026-02-12
- **Updated**: 2026-11-01
- **Added**: 2026-02-04
- **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