How to Add Magic Scroll Effect to Text in Elementor?

Key Takeaways

  • Advanced Typography widget from The Plus Addons for Elementor allows users to add a scroll effect to text.
  • Users can set the animation's start and end points by adjusting offset and duration values in the Scroll Options section.
  • The Magic Scroll toggle enables text to animate back and forth as users scroll up and down the page.
Table Of Content

Do you want to add a scroll effect to text in Elementor? The scrolling effect text allows text to smoothly flow or appear as the user scrolls down the page. Not only does it add a touch of creativity to your website, but it also helps to engage and captivate your audience.

With the Advanced Typography widget from The Plus Addons for Elementor, you can easily add a scroll effect to text in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, add the Advanced Typography widget to the page and follow the steps –

1. In the Advanced Typography tab, select Multiple from the Select Option dropdown.

2. Then add the required text in the repeater items under the Text Listing section.

3. Now open the text repeater item you want to add the scrolling effect to and enable the Magic Scroll toggle.

Advanced typography magic scroll how to add magic scroll effect to text in elementor? From the plus addons for elementor

From the Scroll Options section, you can set when the animation starts and ends by setting an offset and duration value.

4. From the Initial Position section under the Initial tab, you have to set the initial state of the text. Here, you’ll find the following options – 

(X) / Horizontal Distance – To set the initial horizontal position.

(Y) / Vertical Distance – To set the initial vertical position.

Opacity – To set the initial opacity.

Scale Value – To set the initial scale value.

Rotate Value – To set the initial rotate value.

4. Then, from the Final Position section under the Final tab, you have to set the final state of the text. You’ll find the same options as in the initial position.

Now, as per your settings, you’ll see that text animating back and forth as you scroll up and down.

Advanced typography magic scroll demo how to add magic scroll effect to text in elementor? From the plus addons for elementor

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the Magic Scroll effect isn't working?

If the Magic Scroll effect isn't activating, first ensure that the Advanced Typography widget from The Plus Addons for Elementor is properly installed and activated. This widget is essential for adding the scroll effect. Additionally, check that you have enabled the Magic Scroll toggle for the specific text repeater item you want to animate. If these settings are correct and it still doesn't work, revisit your offset and duration values in the Scroll Options section, as incorrect settings may prevent the effect from displaying.

Can I use the Magic Scroll effect for multiple text items at once?

Yes, you can apply the Magic Scroll effect to multiple text items using the Advanced Typography widget. By selecting 'Multiple' from the Select Option dropdown, you can add different text entries in the Text Listing section. Each text item can then have its own scrolling effect settings, allowing for a dynamic and engaging presentation as users scroll down the page.

What settings work best for the Magic Scroll effect in Elementor?

For optimal results with the Magic Scroll effect, consider using a moderate offset and duration to create a smooth animation. The initial and final position settings, such as horizontal and vertical distances, opacity, and scale values, should be tailored to fit your design. A common practice is to set the initial opacity lower and gradually increase it, creating a fade-in effect that enhances user engagement as they scroll.

Does the Magic Scroll effect work on mobile devices?

The Magic Scroll effect is designed to function on all devices, including mobile. However, be mindful of how the effect may appear on smaller screens. Test the scrolling effect to ensure it maintains its intended visual impact without overwhelming the mobile user experience. Adjusting the initial and final state settings can help optimize the effect for different screen sizes.

What happens if I don't set the initial and final positions for the Magic Scroll effect?

Failing to set the initial and final positions for the Magic Scroll effect can result in a static text display, as the animation relies on these settings to dictate how the text behaves during scrolling. Without defining these positions, the text may not move or may not achieve the desired visual effect. It's crucial to configure these settings to ensure the text animates back and forth as users scroll.

Is there a way to create a parallax effect similar to the Magic Scroll effect?

Yes, if you're looking for a different scrolling effect, consider using the Mouse Move Parallax effect, which can also be applied to text in Elementor. This effect creates a dynamic interaction based on mouse movement, adding depth to your design. For more details on implementing this effect, check out the tutorial on How to Add Mouse Move Parallax Effect on Text in Elementor.

Last reviewed: April 9, 2026