Framer Text Scroll Reveal Component

The Framer Text Scroll Reveal component lets you animate text that appears as the user scrolls down the page. It is simple to use, highly customizable, and perfect for adding subtle motion to headings, paragraphs, or callouts that draw attention without feeling overdone.

Why Use It

Text reveal animations help guide the viewer’s focus as they scroll and make your pages feel more dynamic and engaging. This component can be used for landing pages, portfolios, and product sites that want to highlight key messages or create a smooth reading experience.

Because the animation is tied to the scroll position, the motion feels natural and completely under the user’s control.

Key Features

• Works with any text element such as headings, paragraphs, or spans

• Supports both word-by-word and character-by-character animation

• Customizable start and end triggers based on scroll position

• Full control over opacity and transition style

• New granular trigger controls: Start Text, Start Screen, End Text, and End Screen

• Easy to combine with other Framer components for more complex interactions

How to Use the Text Scroll Reveal Component

Step 1: Add the Component

Drag and drop the Text Scroll Reveal component from the component list onto your canvas.

Step 2: Configure Your Text Settings

• Text: Enter the text you want to animate.

• Tag: Choose the HTML tag such as h1, h2, h3, span, or paragraph.

• Type: Select whether the reveal happens word by word or character by character.

• Font: Set your font family, size, weight, and style.

• Color: Choose the color for the text.

Step 3: Adjust Opacity and Scroll Triggers

• Max Opacity: Define how visible the text will be when fully revealed (between 0 and 1).

• Min Opacity: Set how visible the text is before the animation starts (between 0 and 1).

• Transition: Pick the animation style, including linear, ease, or spring-based motion.

How the Scroll Trigger Works

These settings control when the text appears as you scroll. By combining text alignment points with screen positions, you gain precise control over the timing of the reveal.

The Four Settings:

• Start Text — Which part of the text starts the animation (top, middle, bottom, etc.)

• Start Screen — Where on the screen the animation begins (top, middle, bottom, etc.)

• End Text — Which part of the text finishes the animation (top, middle, bottom, etc.)

• End Screen — Where on your screen the animation finishes (top, middle, bottom, etc.)

How It Works

The animation runs between two moments:

• Start: when the chosen part of the text reaches the chosen screen position

• End: when the chosen part of the text reaches the chosen screen position again, but at the end target

As you scroll between these points, the text fades in or animates based on your opacity and transition settings.

Example using the default values:

• Start: when the top of the text reaches the bottom of the screen

• End: when the top of the text reaches the top of the screen

As you scroll through this range, the text smoothly reveals itself. The Transition setting controls how soft, smooth, or bouncy that reveal feels.

In short: choose the text alignment, choose the screen position, and the component reveals your text dynamically as users scroll through the page