--- 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-08-24 lang: en author: "Aditya Sharma" description: "Do you want to add a magic scroll effect on your Elementor website? Adding a magic scroll effect can make your website visually appealing. This effect allows the content animation..." image: https://theplusaddons.com/wp-content/uploads/2024/01/How-Do-You-Add-The-Magic-Scroll-to-Elementor_-1024x536.jpg word_count: 455 --- # How Do You Add The Magic Scroll to Elementor? ## - The Plus Addons for Elementor makes Magic Scroll a Premium feature that needs the PRO version, while Elementor FREE Plugin is installed and activated. - Magic Scroll is enabled by default on some selected widgets of The Plus Addons for Elementor, so it does not need separate activation. - Advanced > Plus Extras lets a widget turn on the Magic Scroll toggle and set offset, duration, initial position, and final position values for back-and-forth animation on scroll up and down. Do you want to add a magic scroll effect on your Elementor website? Adding a magic scroll effect can make your website visually appealing. This effect allows the content animation to run forward and back as the user scrolls down and up, creating a smooth and visually appealing transition.   You can easily add a magic scroll effect on most of the widgets of The Plus Addons for Elementor. [LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/magic-scroll-integration/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Required Setup - [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor ](http://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/)plugin installed and activated. - This is a Premium feature, and you need the PRO version of [The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## How to Activate the Magic Scroll? This feature is enabled by default on some of the selected widgets of The Plus Addons for Elementor. You don’t need to enable it separately. ## Key Features - **Add scrolling effect** - You can easily add a scrolling effect on a widget. ## How to Add a Magic Scroll Effect on a Widget in Elementor? Add one of the listed below widgets of The Plus Addons for Elementor and follow the steps -  1. Go to **Advanced** > **Plus Extras**.  2. Turn on the **Magic Scroll** toggle. ![Magic Scroll Setting](https://theplusaddons.com/wp-content/uploads/2024/01/magic-scroll-settings.gif) From the **Scroll Options** section, you can set when the animation starts and ends by setting an offset and duration value. Also read, you can add a [scroll effect on horizontal page scroll in Elementor.](https://theplusaddons.com/docs/add-scroll-effect-on-horizontal-page-scroll-in-elementor/) 3. From the **Initial Position** section under the **Initial** tab, you have to set the initial state of the object. 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 object. You’ll find the same options as in the initial position. Now, as per your settings, you’ll see the object animating back and forth as you scroll up and down. ![Magic Scroll Demo](https://theplusaddons.com/wp-content/uploads/2024/01/magic-scroll-demo.gif) Did you know? you can [hide header menu in scroll down and show on scroll Up.](https://theplusaddons.com/docs//hide-header-menu-scroll-show-scroll-up-elementor-sticky-headers/) ## Supported Widgets - [Accordion](https://theplusaddons.com/elementor-widget/elementor-accordion/) - [TP Text Block](https://theplusaddons.com/elementor-widget/elementor-advanced-text-block/) - [Advanced Typography](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/) - [Advanced Buttons](https://theplusaddons.com/elementor-widget/elementor-advanced-buttons/) - [Advertisement Banner](https://theplusaddons.com/elementor-widget/elementor-banner-widget/) - [Audio Player](https://theplusaddons.com/elementor-widget/elementor-audio-player/) - [Before After](https://theplusaddons.com/elementor-widget/elementor-before-after-slider/) - [Blockquote](https://theplusaddons.com/elementor-widget/elementor-blockquote/) - [Breadcrumbs Bar](https://theplusaddons.com/elementor-widget/elementor-breadcrumbs/) - [Carousel Remote](https://theplusaddons.com/elementor-widget/elementor-carousel-remote-sync/) - [Contact Form 7](https://theplusaddons.com/elementor-widget/contact-form-7-styler/) - [Countdown](https://theplusaddons.com/elementor-widget/elementor-countdown-timer/) - [Draw SVG](https://theplusaddons.com/elementor-widget/elementor-draw-animated-svg-icon/) - [Dynamic Device](https://theplusaddons.com/elementor-widget/elementor-dynamic-device-mockups/) - [Dynamic Smart Showcase](https://theplusaddons.com/elementor-listing//magazine-slider/) - [Everest Form](https://theplusaddons.com/elementor-widget/everest-forms-styler/) - [Flip Box](https://theplusaddons.com/elementor-widget/elementor-flipbox/) - [Gravity Form](https://theplusaddons.com/elementor-widget/gravity-forms-styler/) - [Heading Animation](https://theplusaddons.com/elementor-widget/elementor-heading-animations/) - [Heading Title](https://theplusaddons.com/elementor-widget/elementor-heading-titles/) - [Info Box](https://theplusaddons.com/elementor-widget/elementor-info-box/) - [Mailchimp](https://theplusaddons.com/elementor-widget/mailchimp-form/) - [Ninja Form](https://theplusaddons.com/elementor-widget/ninja-forms-styler/) - [Number Counter](https://theplusaddons.com/elementor-widget/number-counter/) - [Pricing List](https://theplusaddons.com/elementor-widget/elementor-price-list/) - [Pricing Table](https://theplusaddons.com/elementor-widget/elementor-pricing-table/) - [Process Steps](https://theplusaddons.com/elementor-widget/elementor-process-steps/) - [Progress Bar](https://theplusaddons.com/elementor-widget/elementor-progress-bar/) - [Style List](https://theplusaddons.com/elementor-widget/elementor-stylish-list/) - [Switcher](https://theplusaddons.com/elementor-widget/elementor-switcher/) - [Tabs/Tours](https://theplusaddons.com/elementor-widget/elementor-tabs/) - [Video Player](https://theplusaddons.com/elementor-widget/video-player/) - [WP Forms](https://theplusaddons.com/elementor-widget/wpforms-styler/) - [Button](https://theplusaddons.com/elementor-widget/free-elementor-buttons/) - [Creative image](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/) Also read, [how to create scroll back to top button in Elementor.](https://theplusaddons.com/blog/create-scroll-back-to-top-button-in-elementor/) ## Frequently Asked Questions **Q: Why is the magic scroll effect not showing on my Elementor widget?** A: The effect depends on three things being in place: Elementor FREE installed and activated, The Plus Addons for Elementor installed and activated, and the PRO version because this is a premium feature. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the Magic Scroll feature inside selected widgets, so if one of those pieces is missing, the toggle or animation will not behave as expected. A quick sanity check is whether the widget is one of the supported ones listed on the page. **Q: Which widgets support the magic scroll effect in Elementor?** A: The page says Magic Scroll works on most widgets of The Plus Addons for Elementor, and it lists supported ones like Accordion, TP Text Block, Advanced Typography, Advanced Buttons, Advertisement Banner, Audio Player, Before After, Blockquote, Breadcrumbs Bar, Carousel Remote, Contact Form 7, Countdown, Draw SVG, Dynamic Device, Dynamic Smart Showcase, Everest Form, Flip Box, Gravity Form, Heading Animation, Heading Title, Info Box, Mailchimp, Ninja Form, Number Counter, Pricing List, Pricing Table, Process Steps, Progress Bar, Style List, Switcher, Tabs/Tours, Video Player, WP Forms, Button, and Creative image. That makes it practical for both content blocks and interactive elements. **Q: How do I control when the magic scroll animation starts and ends?** A: The timing is controlled from the Scroll Options section using offset and duration values. Offset sets where the animation begins in relation to scrolling position, while duration controls how long it keeps animating as you move through the page. That matters because a short duration makes the motion feel tight and responsive, while a longer one spreads the effect out across more scroll distance. The Plus Addons for Elementor uses these values to make the animation run forward and back as users scroll down and up. **Q: What settings control the start and end state of a magic scroll effect?** A: The Initial Position and Final Position sections define how the widget looks before and after the scroll animation runs. Both tabs include X or Horizontal Distance, Y or Vertical Distance, Opacity, Scale Value, and Rotate Value. That gives you control over movement plus visual changes like fading in or out and scaling or rotating during scroll. In practice this is what makes Magic Scroll feel like an actual transition instead of just a simple movement effect. **Q: Is magic scroll better than horizontal page scroll effects in Elementor?** A: They solve different problems. Magic Scroll animates a widget forward and back as users scroll down and up on the page. The page also points to a separate [scroll effect on horizontal page scroll in Elementor](https://theplusaddons.com/docs/add-scroll-effect-on-horizontal-page-scroll-in-elementor/), which is about horizontal scrolling behavior instead of normal vertical page motion. If your goal is a widget animation tied to regular scrolling inside Elementor with The Plus Addons for Elementor by POSIMYTH , Magic Scroll is the relevant feature. **Q: Can I use magic scroll with other motion-based effects like sticky headers or back-to-top buttons?** A: The page links Magic Scroll with other scroll-driven ideas such as [hide header menu in scroll down and show on scroll Up](https://theplusaddons.com/docs//hide-header-menu-scroll-show-scroll-up-elementor-sticky-headers/) and [how to create scroll back to top button in Elementor](https://theplusaddons.com/docs//create-scroll-back-to-top-button-in-elementor/). That tells you it fits into a broader scroll-interaction workflow rather than standing alone. The useful takeaway is that Magic Scroll handles widget animation while those other effects handle navigation behavior or page utility.