✦ Not Ordinary Scroll Reveal

Most scroll text reveal components require you to enter text in the control panel, which breaks your ability to apply global text styles in Framer.

Text Reveal Scroll works differently..

Instead of replacing the native text layer, it works directly with your existing text. This preserves all styles applied from the global assets panel, ensuring your font size, weight, color, letter spacing, and line height remain exactly as designed.

You keep full control over your typography, while the component adds a smooth, cinematic scroll-driven text animation on top.

Instructions

Add the hidden component from the Assets panel
Place it as a sibling to your text layer, meaning both the text layer and this component should be wrapped inside the same parent layer
Set the component’s Position to Absolute, and set Top: 0 and Left: 0 so it stays invisible and does not take up any space on the canvas

Setup

You can configure the component settings from the right-side control panel.
The animation works in Preview and live site (not inside canvas)

Properties Control

Scroll Text Reveal Framer Component Controls

How It Works

The component includes simple but powerful controls:

Start %: Defines where the reveal begins in the viewport.
End %: Defines where the reveal completes.
Dim Opacity: Controls opacity of unrevealed text (subtle ghost → fully hidden).
Reveal By: Choose between:
- Characters → letter by letter reveal
- Words → smoother word-by-word animation
Canvas Preview: Toggle placeholder visibility inside the editor.

Key Features

Style-safe text splitting: Preserves all Framer typography styles.
Scroll-driven reveal: True scroll-driven text animation, not trigger-based.
Character or word reveal: Switch between letter by letter reveal or word reveal scroll.
Smooth progressive animation: Partial opacity transitions create a cinematic text opacity scroll effect.
Zero setup: Drop it adjacent to any text layer - works instantly.
Performance optimized: Uses passive scroll listeners and efficient DOM updates.
Support CMS: Works with dynamically loaded content.
Responsive: Recalculates on resize across all breakpoints.

Use Cases

Hero headings: Create a cinematic character reveal scroll effect.
Landing pages: Guide users through storytelling with progressive text reveal.
Product sections: Highlight key lines with smooth scroll effects.
Portfolio intros: Add depth with framer text animation.
Editorial content: Control reading pace with word reveal scroll.
Agency websites: Deliver premium motion that feels crafted and intentional.

Made with ❤️ by Soyeb

© 2026 Soyeb. All rights reserved.

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com

Suggested for you

Suggested for you

Suggested for you