How to Animate Progress Bar with Elementor Magic Scroll Global Addon?

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:


Animate Progress Bar on Scroll in Elementor.

Progress Bar Percentage Change on Scroll Using Elementor Magic Scroll Global Addon

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.
Premium Progress Bar widget settings
Elementor Progress Bar Widget Controls Options

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 Repeater Item Settings and Its General Controls
Progress Bar Scroll Effect in Elementor Magic Scroll Addon

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. Click here to get to know more about the other options listed under “How This Animation Should Work?” and how they actually work.
  • 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.

Animate Multiple Progress Bars on Scroll

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. 

Change Elementor Magic Scroll Animation Order
Elementor Magic Scroll Animation Order Option

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.

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.