---
title: "Scroll Text Color — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Aman Qureshi · Text. Scroll Color Reveal"
canonical: "https://framer.elliotli.dev/component/scroll-text-color"
---

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

# Scroll Text Color

Scroll Color Reveal

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

## Summary

Scroll Color Reveal

## Description

## TextScroll — Scroll-Driven Three-Stage Color Text Reveal

TextScroll is a plug-and-play Framer component that animates your text colors as users scroll. Each character, word, or line flows through a refined three-stage color transition — giving headlines the polish of a custom-coded site, with none of the setup.

Built on GSAP ScrollTrigger and SplitType, it splits your text into visual units and tracks each against scroll position with smooth, frame-perfect timing.

The **three-stage color flow** is the heart of it. Where typical scroll text fades between two colors, TextScroll passes each unit through three states — a resting Initial color, a brief Accent flash as the scroll passes through, and a settled Final color. Accent Duration tunes that middle state from a punchy flash to a held, dramatic moment.

**Three reveal modes:**

-   Character — each letter shifts one by one for bold statements
    
-   Word — words transition together for readable body copy
    
-   Line — full lines fade through for cinematic reveals
    

Toggle **Pin Section** to lock the text in place while the user scrolls, playing the color animation across the pinned distance — perfect for hero and storytelling moments. Pin Start controls exactly where the section locks.

Typography uses native Framer font controls, so text styles like any other layer. Only units that change per frame animate, keeping scroll smooth on long paragraphs.

**Key features**

-   Three-stage color reveal: Initial → Accent → Final
    
-   Three modes: Character, Word, Line
    
-   Pin Section mode for scroll-locked reveals
    
-   Adjustable Pin Start, Scroll Start, Scroll End, Accent Duration
    
-   Native Framer font controls
    
-   Optimized — only animates changed units per frame
    
-   Multiple independent instances per page
    

**Refund Policy**

Due to the digital nature of this product, all sales are final. If you hit any issues, reach out — I'm happy to troubleshoot and make sure TextScroll works correctly in your project.

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

-   All · #7983

## Details

- **Author**: Aman Qureshi
- **Price**: $4.00
- **Published**: 2026-05-27
- **Updated**: 2026-11-08
- **Added**: 2026-05-26
- **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