Animated number counters are popular on the web as a way to display numbers. data to highlight the value of services, case studies, etc. Divi has a dedicated number counter module which can be used to easily generate animated number counters.
However, in this tutorial, we are going to show you how to create numeric counters that animate on scroll using Divi. Using the position options and scrolling effects of Divi, we will design a simple layout to display a date with scrolling numbers.
Part 1: Creating the title section
In this first part, we will create a simple title for the layout.
First, add a row of one column to the section.
Then add a new text module to the line.
Update the contents of the text module with the following elements:
Save the date
Then update the header text style as follows:
- Heading 2 Font: Prata
- Item 2 Text size: 130px (desktop), 70px (tablet), 40px (phone)
Part 2: Creation of counters with scrolling animation
In this next part, we'll create the three counters that will animate the scrolling numbers until they stop to display a date (month, day, and year). Each counter will be built using a total of 5 text modules and a separator module. The first text module will serve as the label of the counter (i.e. month, day, year). The next four text modules will each contain a different number (in progress) which will be animated on scrolling using the vertical movement offsets in Divi. The lower separation module will help hide the overflow of numbers.
Here's how.
Add a second line
Below the existing row, add another row to a column.
Line settings
Before adding a module, update the row parameters as follows:
- Gutter width: 1
- Padding: 0px high, 0px low
Column parameters
Then open the column settings and update the fill as follows:
- Padding (desk): 100px low
- Padding (tablet and phone): 0px low
Add a text module
Then add a text module to the column.
Content / label
For the contents from the text module, add the word “month”.
Text design settings
Once the contents added, update the design settings as follows:
- Background Color: #ffffff
- Text font: Talk
- Text size: 40px
- Height of the line of text: 2em
- Width: 100%
- Padding: 20 pixels at the top, 20 pixels at the bottom, 20 pixels at the left, 20 pixels at the right
- Bottom border width: 5px
- Color of the bottom border: #eeeeee
Position
Then under the advanced tab, update the position options as follows:
- Position: Relative
- Z index 1
Add a text module for the first issue
Once the first text module is in place, we can start adding the numbers that will move on the scroll. To add the first number, add a new text module under the existing "Month" text module.
Add number / content
Then update the text module label to read “num1” for easier reference. Then update the content with the number “01”.
Design Settings for Number
Under the design tab, update the following:
- Text Font: Prata
- Text Text Color: # 8ab2d3
- Text Text Size: 70px
- Text Letter Spacing: 4px
- Text Line Height: 1.5em
- Padding: 20px left
NOTE: The numbers have a text size of 70px and a line-height of 1.5em, which means the total height of the text module will be close to 100px. This is important to keep in mind whenever we start adding the vertical motion offsets. For example, adding a vertical offset of “1” to the text module will move the text module exactly 100px which is the height of the text module.
Scroll Effects for First Number
Add the following scroll effects to the text module.
Under the Vertical Motion Tab, update the following:
- Enable Vertical Motion: YES
- Start offset: 1 (at 10%)
- Average offset: 0 (at 20%)
- End offset: -1 (at 30%)
On the Fade In and Fade Out tab, update the following:
- Activate fade in and out: YES
- Initial opacity: 0% (at 10%)
- Average opacity: 100% (at 20%)
- End opacity: 0% (to 30%)
Make sure to set the trigger for the motion effect at the top of the clip:
- Motion Effect Trigger: Element Top
Create the text module for the second number
Duplicate the first number
Once the first number is created, duplicate it to create the second number text module. Then update the label in the layers view for better reference.
Update number / content
Open the parameters of the second digital text module and update the content with the number "02".
Update position
Then update the position options as follows:
- Position: Absolute
- Vertical offset: 126px
Update scrolling effects
Then update the scrolling effects as follows:
On the Vertical Motion tab, update the following:
- Start offset: 1 (at 20%)
- Average offset: 0 (at 30%)
- End offset: -1 (at 40%)
On the Fade In and Fade Out tab, update the following:
- Initial opacity: 0% (at 20%)
- Average opacity: 100% (at 30%)
- End opacity: 0% (to 40%)
Create a text module for the third issue
Duplicate the second number
To create the text module for the third number, duplicate the text module for the second number.
Update number / content
Update the content with the number "03".
Update scrolling effects
Then update the scrolling effects:
On the Vertical Motion tab, update the following:
- Start offset: 1 (at 30%)
- Average offset: 0 (at 40%)
- End offset: -1 (at 50%)
On the Fade In and Fade Out tab, update the following:
- Initial opacity: 0% (at 30%)
- Average opacity: 100% (at 40%)
- End opacity: 0% (to 50%)
Create a text module for the fourth issue
Third duplicate issue
To create the fourth number for the scroll counter, duplicate the text module for the third number.
Update number / content
Update the content with the number "04".
Update scrolling effects
Then update the scrolling effects:
On the Vertical Motion tab, update the following:
- Start offset: 1 (at 40%)
- Average offset: 0 (at 50%)
- End offset: 0 (at 60%)
On the Fade In and Fade Out tab, update the following:
- Initial opacity: 0% (at 40%)
- Average opacity: 100% (at 50%)
- End opacity: 100% (to 60%)
Add a lower separator
Under the last text module, add a new separator module. This will be used to hide the bottom overflow of the scrolling text in view.
Then select NO to display the separator.
Style and position settings
Update the separator design as follows:
- Background Color: #ffffff
- Width: 100%
- Height: 100px
- Top border width: 5px
On the Advanced tab, update the following:
- Deactivate on: phone and tablet
- Position: Absolute
- Location: bottom left
IMPORTANT: The space that the separator will occupy was created earlier by adding a 100 pixel bottom fill to the column. If you don't add this padding, the separator will overlap the digits.
Creation of additional counters and columns
Duplicate column 1 and update the content
To create a new counter, duplicate column 1. This will create a second column with all the elements in place automatically.
Then all you need to do is update the content of all the text modules with new texts and numbers.
Duplicate column 2 and update the content
Once the contents of all text modules are updated in column 2, duplicate column 2 to create a third counter for the year. Then update the content of each text module as needed.
Final result
Here is the final result.
Other Resources
- How to use the number counter module on Divi
- How to use the circular counter module on Divi
- How to create circular counters that come alive on Divi
Latest Thoughts
This simple layout with scrolling animated number counters should be useful for displaying data digital in a new and unique way. Feel free to ditch the date concept and use the counters for anything you can dream up!
