---
title: "How to Add Magic Scroll Effect to Text in Elementor?"
url: https://theplusaddons.com/docs/magic-scroll-effect-to-text-in-elementor/
date: 2024-05-16
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "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...."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Scroll-Effect-to-Text-in-Elementor_-1024x536.jpg
word_count: 342
---

# How to Add Magic Scroll Effect to Text in Elementor?

## 

- Adds Magic Scroll effect to text using the Advanced Typography widget from The Plus Addons for Elementor.
- Enables scrolling animation by adjusting offset and duration values in the Scroll Options section.
- Sets initial and final text states, including horizontal/vertical distance, opacity, scale, and rotation values.

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](https://theplusaddons.com/docs//advanced-typography/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-magic-scroll.gif)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-magic-scroll-demo.gif)

***Suggested Reading***: *[How to Add Mouse Move Parallax Effect on Text in Elementor?](https://theplusaddons.com/docs//add-mouse-move-parallax-effect-on-text-in-elementor/)*