---
title: "Text Scroll Effects — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Sang Do · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/text-scroll-effects"
---

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

# Text Scroll Effects

Gsap Scroll Reveal

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

![Text Scroll Effects preview image 1](https://framer.elliotli.dev/og/component/text-scroll-effects/ce250a7b8f0d4dce/1600x1200.jpg)

## Summary

Gsap Scroll Reveal

## Description

## Overview

Text Reveal on Scroll adds motion, depth, and storytelling to your typography with beautifully timed scroll-based animations. Whether you're building a landing page, a portfolio, or a content-heavy layout, this component helps transform static text into dynamic, expressive interactions.

No coding required — simply drop it in, customize the style, and let the motion elevate your design.**Preview**: [https://text-reveal-scroll.framer.website/](https://text-reveal-scroll.framer.website/)

## Features

### Multiple Reveal Modes

Choose exactly how your text animates: per line, per word, or per character — perfect for everything from bold hero statements to subtle micro-typography motion.

### Flexible Trigger Controls

Trigger the animation when the component enters view, or link it to any section using a custom Section ID. Ideal for long pages, sticky layouts, or staggered storytelling.

### Viewport Positioning

Fine-tune where the reveal begins. Choose Top / Center / Bottom or set a custom viewport percentage for precise animation timing.

### Custom Motion Styling

Adjust opacity, blur, scale, offset, easing and duration to build your own style — from soft editorial fades to energetic expressive reveals.

### Smart Overflow Handling

Each fragment animates with its own overflow mask, ensuring clean movement that matches your chosen reveal mode.

### Replay or One-Time Animation

Let the animation follow scroll both ways for high-interaction pages, or lock it to one-time reveal for cinematic storytelling.

Manual Text Formatting Supported

Write multiple lines, paragraphs, and manual spacing directly in the text field — the component fully preserves your formatting.

## Use Cases

### Hero Sections

Create high-impact hero intros where each line or word animates with intention and clarity.

### Portfolio & Case Studies

Elevate storytelling with controlled text reveals that guide the reader through your content.

### Editorial Layouts

Use soft, minimal motions for articles, blogs, and long-form reading experiences.

### Brand & Marketing Pages

Introduce key messages with expressive motion to build character and personality.

### SaaS & Product Sites

Reveal features, titles, and benefit sections with smooth, modern animations that feel native to high-end product design.

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

-   All · #3897

## Details

- **Author**: Sang Do
- **Price**: $10.00
- **Published**: 2025-12-03
- **Updated**: 2026-06-12
- **Added**: 2025-11-27
- **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