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 LogicText 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 AnimationEach word in the sentence animates independently, creating a cascading reveal effect that adds rhythm and visual emphasis to your layout.
Initial Blur & Opacity ControlCustomize 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 ControlsFine-tune how and when each word appears using Fade Delay, Fade Duration, and Fade Easing properties for more precise motion control.
Text Alignment OptionsChoose left, center, or right alignment directly in the Framer property panel, giving you better layout control.
Sticky PositioningThe component uses position: sticky to remain in view during scroll, enhancing timing and keeping attention focused during reveal.
Fully Customizable TypographyControl your text content, font family, size, color, line height, letter spacing, and alignment—all within the Framer UI.
Optimized for CanvasAutomatically 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
Launchly
