Animated Text Reveal

Animated Text Reveal s a scroll-triggered text animation component that reveals text word by word as users scroll. Each word transitions from blurred and transparent to sharp and fully visible, creating a fluid, storytelling-like motion that draws the eye and adds depth to your layout.

Key Features:

Scroll-Based Reveal Logic
Text becomes progressively clearer as the user scrolls, based on how far down the component is in the viewport. The Full Reveal Distance property lets you customize when full visibility is reached.

Word-by-Word Animation
Each word in the sentence animates independently, creating a cascading reveal effect that adds rhythm and visual emphasis to your layout.

Initial Blur & Opacity Control
Customize how the text starts by adjusting Initial Blur and Initial Opacity. Words transition smoothly to clarity and full visibility as you scroll.

Fade Timing & Easing Controls
Fine-tune how and when each word appears using Fade Delay, Fade Duration, and Fade Easing properties for more precise motion control.

Text Alignment Options
Choose left, center, or right alignment directly in the Framer property panel, giving you better layout control.

Sticky Positioning
The component uses position: sticky to remain in view during scroll, enhancing timing and keeping attention focused during reveal.

Fully Customizable Typography
Control your text content, font family, size, color, line height, letter spacing, and alignment—all within the Framer UI.

Optimized for Canvas
Automatically renders all words fully visible when in Framer’s design canvas to provide a smooth and editable preview experience.

Use Cases:

• Headlines that unfold as you scroll

• Narrative intros and mission statements

• Scroll-based storytelling on landing pages

• Enhancing visual engagement in content-heavy sections

Customization Properties in Framer:

• Text: Your custom sentence

• Color: Text color

• Font: Font family and weight

• Font Size, Line Height, Letter Spacing

• Text Align: Left, center, or right

• Initial Blur: Blur intensity before scroll

• Initial Opacity: Starting transparency

• Fade Delay: Stagger between words

• Fade Duration: Animation timing per word

• Fade Easing: Control easing curve

• Full Reveal Distance: Scroll distance required for full text reveal