--- 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-04-09 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: 459 --- # How Do You Add The Magic Scroll to Elementor? ## Key Takeaways - The Plus Addons for Elementor allows users to add a magic scroll effect to most of its widgets. - The magic scroll feature is enabled by default on selected widgets of The Plus Addons for Elementor. - Users can customize the animation's start and end points by setting offset and duration values in the Scroll Options section. 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/) - [Caldera Forms](https://theplusaddons.com/elementor-widget/#plus-adapted-wgts) - [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/) - [Post Search](https://theplusaddons.com/?s=perfect) - [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: What should I do if the magic scroll effect isn't working on my Elementor site?** A: If the magic scroll effect isn't functioning, ensure that both the Elementor FREE Plugin and The Plus Addons for Elementor are installed and activated. This feature is a premium option, so you need the PRO version of The Plus Addons for Elementor for it to work properly. Check that you are using a supported widget, as the effect is enabled by default on select widgets. **Q: Can I use the magic scroll effect on all Elementor widgets?** A: The magic scroll effect can be added to most widgets of The Plus Addons for Elementor. However, it's essential to verify that you are using one of the supported widgets, such as the Accordion, TP Text Block, or Advanced Buttons. This ensures the effect will function as expected when you implement it. **Q: What are the best settings for the magic scroll effect in Elementor?** A: To optimize the magic scroll effect, set the animation's start and end points using the offset and duration values in the Scroll Options section. Additionally, configure the initial and final positions for horizontal and vertical distances, opacity, scale, and rotation. These settings allow you to customize how the animation behaves as users scroll, enhancing the visual appeal of your site. **Q: Does the magic scroll effect impact page load performance?** A: While the magic scroll effect enhances visual engagement, it can potentially impact page load performance depending on how it's implemented. Heavy animations or multiple effects on a single page may slow down loading times. It's advisable to test the performance after adding the effect to ensure a smooth user experience. **Q: How does the magic scroll effect enhance user experience on a website?** A: The magic scroll effect creates a dynamic interaction as users scroll, making content appear to animate back and forth. This engaging visual transition can keep users interested and encourage them to explore more of your site. It's particularly effective for storytelling or showcasing products, as it adds a layer of interactivity. **Q: What common mistakes do people make when setting up the magic scroll effect?** A: A common mistake is not adjusting the initial and final position settings correctly, which can lead to unexpected animations. Users often overlook the importance of setting appropriate offset and duration values, which can affect when the animation starts and ends. Ensuring these settings are tailored to your design will help achieve the desired effect.