--- title: "How Do You Add The Magic Scroll to Elementor?" url: https://theplusaddons.com/docs/magic-scroll-effect-in-elementor/ date: 2024-01-19 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "Magic Scroll links a widget's position, scale, rotation or opacity to how far the page has scrolled, so the widget transitions smoothly as it enters the viewport. It sits on..." image: https://theplusaddons.com/wp-content/uploads/2024/01/How-Do-You-Add-The-Magic-Scroll-to-Elementor_-1024x536.jpg word_count: 364 --- # How Do You Add The Magic Scroll to Elementor? ## - Magic Scroll links a widget’s position, scale, rotation, or opacity to page scroll, and it sits in the widget’s Advance tab after the extension is switched on. - The Plus Addons for Elementor Pro requires Magic Scroll to be enabled under The Plus Addons > Extensions in the Plus Extras group, then saved before use. - Magic Scroll uses From and To popovers for X/Y offset, opacity, scale, and rotation, with defaults of X 0, Y 0 for From and X 0, Y -50 for To when sub-options stay closed. Magic Scroll links a widget's position, scale, rotation or opacity to how far the page has scrolled, so the widget transitions smoothly as it enters the viewport. It sits on a widget's Advance tab once the extension is switched on. ***Requirement - This extension is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/magic-scroll-integration/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — confirmed on The Plus Addons > Extensions screen (Plus Extras group, PRO badge).- **Extension to enable:** Magic Scroll, switched on under **The Plus Addons > Extensions** (Plus Extras group) — not under Widgets. ## Steps - Enable **Magic Scroll** at **The Plus Addons > Extensions** (Plus Extras group), then save.- Select the widget in the Elementor editor and open its **Advance** tab.- Turn on **Magic Scroll** and open the **From** and **To** popovers to set the starting and ending X/Y offset, opacity, scale and rotation.- Leave a sub-option's popover closed to keep its default (X 0, Y 0 opacity 1, scale 1, rotate 0 for From; X 0, Y -50, opacity 1, scale 1, rotate 0 for To) - out of the box this is only a small upward shift, not a fade or scale change.- Publish the page and scroll it - the widget's position (and any other property you set) transitions between the From and To values as it crosses the viewport. ![The widget's computed transform mid-scroll, moved from the identity matrix toward its configured end position](https://theplusaddons.com/wp-content/uploads/2026/09/magic-scroll-result.webp) ## How It Behaves Confirmed on a rendered fixture: with every From/To sub-option left at its default, scrolling the page moved the widget's computed CSS `transform` from the identity matrix to `matrix(1,0,0,1,0,22.98)` partway through the scroll scene - a real, observed, scroll-linked vertical shift, exactly the direction and rough magnitude the -50px default To value predicts. ## Limitations - Out of the box this is a plain vertical move only - a reader expecting a fade or scale change by default will not see one unless they open the From/To popovers and set those values themselves. ## Troubleshooting ### Nothing changes as I scroll Confirm the extension is switched on at The Plus Addons > Extensions (Plus Extras group), and that Magic Scroll itself is turned on inside the widget's Advance tab. ## Related Docs - [Mouse Move Parallax](https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/)- [Continuous Animation](https://theplusaddons.com/docs/global-continuous-animation-widget-in-elementor/) ## Frequently Asked Questions **Q: Does Magic Scroll in Elementor actually move the widget while scrolling?** A: Magic Scroll links a widget’s position, scale, rotation, or opacity to how far the page has scrolled, so the element changes as it enters the viewport. In the default setup, the effect is just a small upward shift because the To values start at X 0, Y -50, opacity 1, scale 1, rotate 0. If you want more than movement, you have to open the From and To popovers and set those properties yourself. **Q: What do I need installed before Magic Scroll will work?** A: The Plus Addons for Elementor Pro has to be installed and activated first, because Magic Scroll is part of that edition. The extension is enabled from The Plus Addons > Extensions in the Plus Extras group, and it shows as a PRO badge there. That matters because the effect sits inside a widget’s Advance tab only after the extension is switched on. **Q: Where do I turn on Magic Scroll in Elementor?** A: Magic Scroll is enabled from The Plus Addons > Extensions under the Plus Extras group, not from Widgets. Once it is switched on there, it appears in a widget’s Advance tab inside the Elementor editor. That placement is easy to miss if you are looking for it in the wrong menu, which is why people often think it is missing when it is just disabled at the extension level. **Q: How do I make Magic Scroll do more than a simple vertical move?** A: The default behavior is only a small upward shift, so fade and scale changes do not happen unless you set them manually. Open the From and To popovers and define X/Y offset, opacity, scale, and rotation for each state. Leaving a sub-option closed keeps its default values: From uses X 0, Y 0, opacity 1, scale 1, rotate 0; To uses X 0, Y -50, opacity 1, scale 1, rotate 0. **Q: Why does nothing happen when I scroll after setting up Magic Scroll?** A: The usual failure point is that one of the two switches is still off. The extension has to be switched on at The Plus Addons > Extensions in the Plus Extras group, and Magic Scroll also has to be turned on inside the widget’s Advance tab. If either side is disabled, the scroll-linked transform will not run on that widget. **Q: What are good alternatives if I want other scroll or motion effects instead of Magic Scroll?** A: If you want motion effects beyond this scroll-linked widget behavior, The Plus Addons for Elementor points to [Mouse Move Parallax](https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/) and [Continuous Animation](https://theplusaddons.com/docs/global-continuous-animation-widget-in-elementor/). Those are separate docs for different kinds of movement. Magic Scroll itself stays focused on linking position, scale, rotation, or opacity to scroll progress inside Elementor.