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

• 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).

• Start: Choose where on the screen the animation begins (Bottom, Bottom Center, or Center).

• End: Select where the animation should finish (Top, Top Center, or Center).

• Transition: Pick the animation style from Framer’s built in transition options.

With these settings, the text will reveal dynamically as users scroll through your page, creating a smooth and visually appealing motion effect.