How to create circle counters that come to life while scrolling with Divi

Animated circle counters are a popular way to present information (like statistics or metrics) on a web page with a fun interaction. In fact, you might already be familiar with the circle counter module from Divi, which allows you to add circle counters to your site Divi quickly and easily.

However, in this tutorial, we'll show you how to create fully custom circle counters that animate as you scroll! We won't need any external custom CSS to create them. The trick is to take advantage of the Layers feature of Divi to manage several modules superimposed and animated with precision.

Possible Outcome

Here is a quick overview of the animated circle dividers that we will create in this tutorial.

Creation of the four circle counters which come alive when scrolling with Divi

Section and line configuration

First, add a four column row to the default section.

Next, open the section settings and add a top and bottom margin so that we have enough space to test the scrolling effects of the circle counters that we are going to create.

Margin: 85vh high, 85vh low

Then open the line settings and update the following:

Gutter width: 1
Width: 100%
Max width: 1200px

Using the Layers view

Before you start creating the animated circle counters, make sure you deploy the Divi Layers function. You can do this by clicking on the gray layers icon in the bottom settings menu.

Because we're going to be creating a lot of overlapping elements (or layers), the layer box will definitely be useful for managing our layers in the future.

Creation of animated circle counter # 1 (25%)

This first animated circle counter will animate up to 25% of the circle on the scroll and have the percentage text corresponding to the center that will blend into the scroll. To build the complete circle counter design we will be using several overlapping text dividers and modules. Here's how to do it.

The Back Circle

To create the back circle we are going to use a separator module that we will shape as a circle and give it a background color.

Add a separation module

Pull the divider up in the layer view and change the label to read "backcircle". Then open the settings of the separation module and update the following:

Show divider: NO
Background color: # c3e0e5

Update the design parameters as follows:

Width: 250px
Height: 250px
Margin: 25 pixels at the top, 25 pixels at the bottom, 25 pixels at the left
Rounded corners: 50%

The rotating color bar

The next part of the circle counter will be the rotating color bar. Duplicate the previous separator (back circle) to relaunch the design. Then update the new separator with the label "colorbar".

To create the rotating color bar effect, we need to turn this divider into a semicircle with the color we want to use for the bar.

Open the color bar separator settings and update the following:

Background color: none
Left color gradient background: # 121b55
Gradient background color on the right: rgba (255,255,255,0)
Gradient direction: 90deg
Starting position: 50%
Final position: 0%

On some browsers there is a small overlapping issue that shows unwanted color through the layers. To avoid this, we're going to make this semicircle slightly smaller and adjust the offset accordingly.

Width: 248px
Height: 248px

To make the circle of the color bar overlap the rear circle, give the divider an absolute position as follows:

Position: absolute
Vertical offset: 26 pixels
Horizontal offset: 26 pixels

Then add the following scroll effect to rotate the circular bar 90 degrees (or 25% of the circle).

Under the Rotary Effects tab ...

Starting rotation: 0deg (at 15% of the window)
Average rotation: 90 degrees (at 20% -25% of viewport)
End of rotation: 90 degrees (at 30% of viewport)

The percentages and rotation values here may not seem to make complete sense at this point. We make it easier to update the rotation later when we build the next circle counter that ends at 180 degrees (50% of the circle). The important thing at this point is that the rotation ends at 90 degrees (or 25%).

The shield

The next element of our circle counter is what I call the shield, which is another semicircle that hides the left side of the color bar circle as it spins.

To create the shield, duplicate the first Back Circle separator module we created earlier. Then drag it under the "Color Bar" separator module and update the label to "shield" for easy reference.