--- 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 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: 459 --- # How Do You Add The Magic Scroll to Elementor? ## - Activates the Magic Scroll feature by toggling it on in the Advanced > Plus Extras section of The Plus Addons for Elementor. - Requires Elementor FREE Plugin and the PRO version of The Plus Addons for Elementor to utilize the magic scroll effect. - Supports various widgets including Accordion, TP Text Block, and Advanced Buttons for adding scrolling effects. 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/)