How to Animate a Carousel on Scroll Using Magic Scroll Elementor Addon?

In this tutorial, we are going to learn how you can create a carousel that works while scrolling up or down across your Elementor web page using the Elementor Magic Scroll Global Addon in Premium Addons Pro for Elementor plugin, but before we go deeper into the tutorial, you should know the tools you are going to use to build a fully responsive scene as the one clarified below.

Animate carousel on scroll using Elementor Magic Scroll addon
Animate Premium Carousel on Scroll Using Elementor Magic Scroll Addon

First, make sure you have Elementor Page Builder, Premium Addons for Elementor, and Premium Addons PRO, all installed and activated on your WordPress website.

The Elementor Elements that were Used to Build the Carousel Scene are:


01. Carousel Content: Creating Elementor Templates

Start by creating/adding the content you want to be displayed within Premium Carousel widget. In our example, we wanted to display 3 rows of call-to-action banners, so, we built 3 Elementor templates, each template will actually be displayed as a row using the Carousel widget.

Create templates in Premium Carousel Elementor widget
Elementor Templates to be Used within Premium Carousel Widget

Carousel Responsiveness

Each Elementor template will need to be adjusted on responsive screens. To do that, follow the steps listed below.

  • Duplicate the Elementor section you already created for desktop screens.
  • Adjust the number of columns within the duplicated one. In our example, we decreased the number of columns to 3 instead of 4 to be displayed on mobile screens and/or iPads.
  • Use Premium Display Conditions to display the duplicated section on mobile screens and/or iPads. Additionally, use the Display Conditions too to hide the first section on responsive devices.
Show/hide Elementor content based on device type using Premium Display Conditions
Use Display Conditions to Show or Hide Content Based on Different Screen Sizes
NOTE* It’s highly recommended to use the Display Conditions Elementor feature to show or hide any Elementor content based on a specific device. Using it will make the hidden Elementor content not readable, the same as if it is not existing at all on the Elementor page which will save the page weight by making it lighter.

02. Customizing the Premium Carousel Widget

Once you finish adding/creating the templates you want to be inserted within the Carousel widget, go back to your Elementor page, then drag and drop the Premium Carousel widget. After that, follow the steps listed underneath.

  • From the Carousel settings, select “Repeater” as a content type.
  • Click on “Add Item”, then from the repeater item, go and select the template you already created from the drop-down list which exists under the “Select Existing Template” option.
Add Elementor templates in Premium Carousel widget
Premium Carousel Main Settings to be Used with Magic Scroll Global Elementor Addon
NOTE* Here, we need to mention that you already have two options to display an Elementor template within the Carousel widget. The first one is all about creating the Elementor using the Elementor Live Editor tool, while the second one is all about calling an already existing Elementor template by selecting it from the “Select Existing Template” option.

Carousel Settings

In this step, it is expected that you have done adding the carousel content through the repeater items. So, we’ll start adjusting the Carousel widget itself. The steps listed below will guide you on how you can get the exact same appearance on your Elementor web page.

  • Select “Horizontal” as a carousel “Type”.
  • Select “All Visible” for the carousel “Appearance” option.
  • Add the value “1” to the Desktop, Tabs, and Mobile Slides.
  • Switch on the “Use With Magic Scroll” option.

03. Elementor Magic Scroll Settings

Here, we are going to customize the Elementor Magic Scroll Global Addon so we can get the exact same on-scroll moving carousel. Follow the steps listed underneath to get to know the settings that should be applied to reach this effect with no hassle.

From the “Carousel” widget, navigate to the “Advanced” tab. Scroll down until you see “Premium Magic Scroll”, then go and enable it. Once you do that, you can apply the Elementor Magic Scroll settings as organized below.

A. Repeater Item Settings

  • Click “Add Item”, then go and select the “Carousel Type” option as an “Animation” type.
  • Add “-300px” as a value for the “Translate X” option. NOTE* You should use negative values for this control. Click here to get to know more details.
Premium Magic Scroll addon settings for carousel effect5
Elementor Magic Scroll Main Settings to be Used with Premium Carousel Widget

B. Magic Scroll Settings

  • How this Animation Should Work?: We selected “Play Animation Only When Visible” which means that the animation will start working only when the element gets visible within the viewport area.
  • Offset: Make the offset value “50%”. Visit this article to get to know more about the “Offset” control.
  • Decrease Animation Speed By: This option will let you control how fast or slow the animation will work. We have kept the default value at “1”.
  • Scrub: This option helps make the animation work smoothly. In our example, we used “1.5” as a “Scrub” value.

Congratulations!

Now, you are supposed to have the exact same effect made by “YOU” on your Elementor website. Honestly, we believe that you will reach much better animation effects than the one we provided and we’re really thrilled to see it. Don’t hesitate to share your work on our Facebook group and make us get INSPIRED!

Related Docs:

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.