Elementor Magic Scroll is a new global addon for Elementor Page Builder that allows you to create scroll animation effects on your Elementor pages. Before we get into this article, we recommend checking this documentation article of Elementor Magic Scroll Addon to get to know more about this new feature and the options included in it.
In this tutorial, we will show how to use the Progress Bar effect from Elementor Magic Scroll Addon to animate the Premium Progress Bar widget on page scroll.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that Elementor Magic Scroll feature and Premium Progress Bar widget are enabled so you can find them in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
1. Use Premium Progress Bar Widget.
Go to your website page and from the Elementor editor, drag Premium Progress Bar widget and drop it into your desired section.
For this tutorial, we will mention the options that need to be changed to achieve the same layout, but you can customize your Premium Progress Bar for Elementor as you want on your Elementor page. Please check this article to know more about Premium Progress Bar settings.
- Type: Choose “ Half Circle ”.
- Size: Set it to “200”.
- Show Percentage Value: Enable this option and set Its value to “ 87 ”.
- Use With Magic Scroll: Make sure to enable this option.
Progress Bar > Style: From the Style tab, you can keep adjusting the Colors & Fill Colors, Labels, Prefix & Suffix, adding some Margins & Spacing, and editing the Typography.
02. Animate the Progress Bar Using Elementor Magic Scroll.
Jump to the widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the repeater item that appeared to you choose Progress Bar from the Select Animation dropdown list.
Elementor Magic Scroll Addon General Settings
- How This Animation Should Work?: We used “Lock Page Scroll Until Animation Ends” because we want the Progress Bar Percentage Value to reach its end before jumping to next Elementor section. know more about the other options listed under “How This Animation Should Work?” and how they actually work from Magic Scroll documentation article.
- Animation Order: Set the order of the animation of the current Elementor element. The animations with Animation Order set to 1 start first, then animations with Order 2, and so on.
- Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “3”.
03. Duplicate the Progress Bar And Change Its Settings.
Now after creating the first Progress Bar, we will duplicate its column 3 times and change the settings and styles for the duplicated elements, like changing the percentages values, labels colors, and so on.
For the Magic Scroll settings, In our example, we changed Animation Order option to make them work in sequence. We set the Animation Order values for Progress Bar widgets from left to right to 1, 2, 3, and 4.
You Did It!
Now, you can create your own Elementor Progress Bar Animation Effect for your Elementor website. We’re looking forward to seeing what you will come up with and we encourage you to post your work in our Facebook Group and get other designers inspired.
