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.

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:

• Premium Magic Scroll Elementor Global Addon.
  • Live Page · Documentation Article.
• Premium Carousel Elementor Widget.
  • Live Page · Documentation Article.
• Premium Banner Elementor Widget.
  • Live Page · Documentation Article.
• Premium Display Conditions Elementor Feature.
  • Live Page · Documentation Article.

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.

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.

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.

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.

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!