---
title: "Animated Scroll Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Tyrone C. · Text. Turn ordinary headlines into experiences."
canonical: "https://framer.elliotli.dev/component/scrolltextcolor"
---

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

# Animated Scroll Text

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

![Animated Scroll Text preview image 1](https://framer.elliotli.dev/og/component/scrolltextcolor/0bdf87e2882eab76/1600x1200.jpg)

## Summary

Turn ordinary headlines into experiences.

## Description

Turn ordinary headlines into experiences. Elevate your narrative, guide attention and make your message stick. No code required.**Key features**

-   Word-by-word text reveal
    
-   Adjustable animation (color, start, end, offset)
    
-   Works with any Framer font
    
-   Ready to use in minutes
    

**Controls (v1.3)**

-   Text: Your statement
    
-   Font: Font family and weight
    
-   Color: Start and end color of your text animation
    
-   Trigger: Text animation start and end (plus offsets)
    
-   Line break:
    
    1.  Go into the **text property field** (where you write your content)
        
    2.  Click where you want the line break
        
    3.  Hold **shift** and press **Enter**.
        
-   Italics for single words:
    
    1\. Go into the **text property field** (where you write your content)
    
    2\. Set a word in stars e.g. \*component\*
    
    3\. Press enter.
    
    4\. To italicize the entire text block, use the font selector.
    

**How it works:**

-   1\. Drop the component anywhere in your canvas
    
-   2\. Enter your copy (headline, CTA, body text, anything!)
    
-   3\. Set optional animation controls to suit your brand
    
-   4\. Preview live and publish
    

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

-   All · #4596

## Details

- **Author**: Tyrone C.
- **Price**: $5.00
- **Published**: 2025-08-14
- **Updated**: 2025-11-03
- **Added**: 2025-08-10
- **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