Scroll Text Animation is a powerful way to make your content more engaging by revealing text as users scroll through your page. With smooth, scroll-triggered effects, you can guide attention, improve readability, and create a more interactive browsing experience. Whether you want to highlight key messages, introduce sections with style, or simply add subtle motion to your layout, this effect helps bring your content to life while keeping the design clean and modern.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Scroll Text Animation widget to your Elementor website
To add scroll text animation on your Elementor website, install the Scroll Text Animation widget from the Unlimited Elements Widget library.
Step #3: Add the Scroll Text Animation widget to your Elementor page
Now, in the Elementor editor, find the Scroll Text Animation widget and drag it to the desired part of your page.
Testing and Tools
Navigate to the Testing and Tools section and enable the “Show Markers” option to display on-screen indicators that help you visualize where the Start and End scroll positions are located for debugging purposes.
General Settings
Content
The input field where you enter the text that will be animated on the screen.
Reveal Type
Select the desired reveal type.
- Characters
- Words (Pro)
- Lines (Pro)
Reveal Direction
Select the reveal direction.
- Start
- Center (Pro)
- End (Pro)
- Random (Pro)
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.
Scroll Behavior
Pin (Pro)
Toggles whether the text element stays "fixed" 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.
Wrapping it Up!
Adding a Scroll Text Animation to your website is a simple yet effective way to enhance visual storytelling and keep visitors engaged as they explore your content. With flexible styling and animation controls, you can easily match the effect to your brand and layout without adding complexity to your workflow. Start experimenting with scroll-based text effects to create a smoother, more dynamic user experience across your Elementor pages.