Text Scroll Reveal
May 8, 2024
The Framer Text Scroll Reveal component allows you to create text reveal animation triggered by scroll position.
To implement the Text Scroll Reveal component, follow these steps:
Drag and drop the "Text Scroll Reveal" component from the component list onto your canvas.
Configure the following properties:
Text: Enter the text content that you want to reveal during the scroll animation.
Tag: Select the HTML tag for the text element (e.g., h1, h2, h3, span, p).
Type: Choose whether you want the reveal animation to occur word-by-word or character-by-character.
Font: Customize the font properties, including family, size, weight, and style.
Color: Set the color of the text.
Max Opacity: Specify the maximum opacity value for the text when fully revealed (between 0 and 1).
Min Opacity: Set the minimum opacity value for the text before it starts revealing (between 0 and 1).
Start: Determine the scroll position where the text reveal animation should start (Bottom, Bottom/Center, or Center).
End: Select the scroll position where the text reveal animation should end (Top, Top/Center, or Center).
Transition: Choose the desired animation style for the text reveal effect from the available Framer transitions.
With these settings, the Text Scroll Reveal component will dynamically reveal your text content as the user scrolls.
