---
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-09-13
lang: en
author: "Aditya Sharma"
description: "Want words that move, fade or turn as visitors scroll down the page? The Magic Scroll option of the Advanced Typography widget from The Plus Addons for Elementor animates a..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Scroll-Effect-to-Text-in-Elementor_-1024x536.jpg
word_count: 410
---

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

## 

- Advanced Typography widget adds Magic Scroll only in Multiple mode, and The Plus Addons for Elementor Pro is required because the free plugin shows it with a lock icon.
- Magic Scroll starts when the item reaches the middle of the browser window and follows the scroll position over the Duration, with default settings of Offset 0 and Duration 300.
- Each text item has its own Magic Scroll, so one word moves while other items stay still, and Final (Y) -50 makes the text slide 25 px down over 300 px of scrolling.

Want words that move, fade or turn as visitors scroll down the page?

The **Magic Scroll** option of the Advanced Typography widget from The Plus Addons for Elementor animates a text item between a start and an end state while the page scrolls.

*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 it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.- **Widget to enable:** Advanced Typography, switched on under **The Plus Addons > Widgets**.- Magic Scroll is available only in **Multiple** mode.

## Steps

- Add the Advanced Typography widget and set **Select Option** to **Multiple**.- In **Text Listing**, add your text to the items. [How Multiple mode works](https://theplusaddons.com/docs/multiple-styles-on-a-text-in-elementor/).- Open the item that should move and turn on **Magic Scroll**.

![An opened Text Listing item with Magic Scroll switched on and its Initial and Final tabs](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-magic-scroll.webp)

- Click the pencil icon of **Scroll Options** to set when the animation starts (**Offset**) and how many pixels of scrolling it lasts (**Duration**).- On the **Initial** tab, open **Initial Position** and set the start state.- On the **Final** tab, open **Final Position** and set the end state.- Publish and scroll the page.

![Setting up Magic Scroll for a text item](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-magic-scroll.gif)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Offset | Moves the start point of the animation, in px | 0 |
| Duration | How many px of scrolling the animation takes | 300 |
| (X) / Horizontal Distance | Horizontal position | 0 |
| (Y) / Vertical Distance | Vertical position | Initial 0, Final -50 |
| Opacity | 0 (invisible) to 1 (fully visible) | 1 |
| Scale Value | Size, 0 to 2 | 1 |
| Rotate Value | Rotation in degrees, -360 to 360 | 0 |

## How It Behaves

- The animation starts when the item reaches the middle of the browser window and follows the scroll position over the Duration.- With the default settings, the item slides 25 px down over 300 px of scrolling. The distances are applied at half their value, with the sign reversed, so a Final (Y) of -50 moves the text 25 px down.- Each item has its own Magic Scroll, so one word can move while the others stay still.

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

## Troubleshooting

### I can't find Magic Scroll

It is inside the items of the Text Listing. Set **Select Option** to **Multiple** and open an item.

### Nothing moves

Check on the published page. The page must be long enough to scroll the item past the middle of the window.

## Related Docs

- [Advanced Typography widget: settings overview](https://theplusaddons.com/docs/advanced-typography/)- [Add a mouse move parallax effect to text](https://theplusaddons.com/docs/add-mouse-move-parallax-effect-on-text-in-elementor/)- [Combine multiple styles on a text](https://theplusaddons.com/docs/multiple-styles-on-a-text-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before using Magic Scroll on text in Elementor?**
A: Magic Scroll is part of the Advanced Typography widget in The Plus Addons for Elementor, and it needs The Plus Addons for Elementor Pro. The widget also has to be enabled under The Plus Addons > Widgets, and Magic Scroll only appears in Multiple mode. That combination matters because the effect is applied to individual text items, not a single static text block.

**Q: Why can't I find the Magic Scroll option in the Advanced Typography widget?**
A: Magic Scroll sits inside the items of the Text Listing, so it won't show up at the top level of the widget. The usual fix is to switch Select Option to Multiple and then open the specific item you want to animate. In practice, that means the effect is tied to one word or item at a time, which is why single-mode setups won't expose it.

**Q: How do I make only one word move while the rest stay still?**
A: Magic Scroll works per item, so one word can animate while other words remain static. That behavior comes from using Multiple mode in the Advanced Typography widget and turning on Magic Scroll only for the chosen item. This is useful when you want emphasis without animating an entire sentence, since each item keeps its own scroll settings.

**Q: What do Offset and Duration control in Magic Scroll?**
A: Offset sets where the animation starts in pixels, and Duration sets how many pixels of scrolling the animation lasts. The default values are 0 for Offset and 300 for Duration. A smaller Offset starts earlier in the scroll path, while a longer Duration spreads the motion over more scrolling distance, which makes the movement feel slower and more gradual.

**Q: Why does my Magic Scroll text not move on the page?**
A: The effect only shows on the published page, and the page has to be long enough for the item to scroll past the middle of the browser window. Magic Scroll starts when the item reaches that middle point and then follows scroll position over its Duration. If there isn't enough vertical space, there may be no visible motion even though the settings are correct.

**Q: What is a good way to set up Magic Scroll for a subtle text animation?**
A: The default setup is already subtle: with Final (Y) at -50 and Duration at 300, the item slides 25 px down over 300 px of scrolling because distances are applied at half value with reversed sign. That makes it a better fit for small emphasis effects than dramatic motion. If you want more control over timing or direction, use Initial Position and Final Position together with [Advanced Typography widget: settings overview](https://theplusaddons.com/docs/advanced-typography/).