In this guide, we will show you how to add a Scroll Text Animation widget to your Elementor website. The Scroll Text Animation widget brings your content to life with smooth, scroll-triggered text reveals, creating a dynamic and engaging reading experience. Ideal for storytelling sections, feature highlights, and call-to-action content, this widget helps guide user attention and improve content flow as visitors scroll through your page. With flexible animation and styling options, you can seamlessly align the text effects with your website’s design.
Let’s explore the customization options available in the Scroll Text Animation widget for Elementor below
Add a Free Scroll Text Animation to Elementor
Add a Free Scroll Text Animation to an Elementor Page
Elementor Scroll Text Animation Widget General Settings
Content
The input field where you enter the text that will be animated on the screen.
Reveal Type
Determines the unit of text used for the animation, such as showing the text one character at a time or one word at a time.
Reveal Direction
Sets the starting point or path for the animation (e.g., from the start of the text, end, or a specific side).
Reveal Smoothness (ms)
Adjusts the fluidity of the transition between hidden and revealed text states.
Reveal Speed (ms)
Controls how quickly the animation progresses through the text string.
Repeat Reveal (ms)
Sets a delay for the animation to restart after it has completed.
Animation Easing
Defines the mathematical curve of the motion (like "power1.out") to make the movement feel more natural or stylized.
Pin
Toggles whether the text element stays "stuck" in the viewport while the user continues to scroll.
Animation Start Position
Defines the specific scroll point or trigger where the text animation begins to play.
Animation End Position
Determines the scroll point where the animation completes its sequence or reaches its final state.
Elementor Scroll Text Animation Widget Style Settings
Typography
Manages font settings for the animated text.
Text Stroke
Adds an outline to the text characters.
Select Align
Adds a shadow effect behind the text.
Color
Sets the text color for the selected state (Active or Inactive).
Text Rotate (deg)
Tilts the text by a specific degree.
Text Scale
Adjusts the size magnification of the text.
Text Blur
Applies a blur effect to the text.
Text Opacity
Controls the transparency level of the text.
Scroll Text Animation Widget Design Examples For Elementor
Here are some live use cases for the Scroll Text Animation widget.
Scroll Text Animation.
Thank you for using the Scroll Text Animation Widget for Elementor! This widget adds life to your content with smooth, scroll-triggered text reveals that create a visually engaging reading experience. Perfect for storytelling sections, feature highlights, and call-to-action content, it helps guide user attention and improve content flow as visitors scroll through your page. With flexible animation and styling options, you can easily match the text effects to your website’s design. If you have any questions or need assistance, feel free to reach out. For inspiration and live demos, don’t forget to visit our website.