Animated counters are popular on the web as a way to display numeric data to highlight the value of services, case studies, etc. Divi has a dedicated animated counters module that can be used to easily generate animated counters.
However, in this tutorial, we will show you how to create digital counters that animate in scrolling using Divi. Using Divi’s position options and scrolling effects, we’re going to 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 content of the text module.
Then update the header text style as follows:
- Heading 2 Font: Prata Item 2
- Text size: 130px (desktop), 70px (tablet), 40px (phone)
Part 2: Creating 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 to do it.
Add a second line
Below the existing row, add another row to a column.
Line parameters
Before adding a module, update the row parameters as follows:
- Gutter width: 1
- Padding: 0px high, 0px low
Column settings
Then open the column settings and update the padding as follows:
- Padding (desktop): 100px low
- Padding (tablet and phone): 0px low
Add a text module
Then add a text module to the column.
Content / Label
For the content of the text module, add the word “month”.
Text design settings
After adding content, update the design settings as follows:
- Background Color: #ffffff
- Text font: Talk
- Text size: 40px
- Text line height: 2nd
- Width: 100%
- Padding: 20 pixels top, 20 pixels bottom, 20 pixels left, 20 pixels right
- Bottom border width: 5px
- Bottom border color: #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 to 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 (to 20%)
- End offset: -1 (at 30%)
On the Fade In and Fade Out tab, update the following:
- Activate fade in and fade out: YES
- Starting opacity: 0% (to 10%)
- Medium 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 settings 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 scroll effects
Then update the scroll effects as follows:
On the Vertical Motion tab, update the following:
- Start offset: 1 (at 20%)
- Average offset: 0 (to 30%)
- End offset: -1 (at 40%)
On the Fade In and Fade Out tab, update the following:
- Starting opacity: 0% (to 20%)
- Medium opacity: 100% (at 30%)
- End Opacity: 0% (to 40%)
Create a text module for the third number
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 scroll effects
Then update the scroll effects:
On the Vertical Motion tab, update the following:
- Start offset: 1 (at 30%)
- Average offset: 0 (to 40%)
- End offset: -1 (at 50%)
On the Fade In and Fade Out tab, update the following:
- Starting opacity: 0% (to 30%)
- Medium opacity: 100% (at 40%)
- End Opacity: 0% (to 50%)
Read more: How to add the animated drawers template to your Divi site
Create a text module for the fourth issue
Third duplicate number
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 scroll effects
Then update the scroll effects:
On the Vertical Motion tab, update the following:
- Start offset: 1 (at 40%)
- Average offset: 0 (to 50%)
- End offset: 0 (to 60%)
On the Fade In and Fade Out tab, update the following:
- Starting opacity: 0% (to 40%)
- Medium opacity: 100% (at 50%)
- End Opacity: 100% (at 60%)
Add a lower divider
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 divider design as follows:
- Background Color: #ffffff
- Width: 100%
- Height: 100px
- Top border width: 5px
On the Advanced tab, update the following:
- Disable 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 padding to the column. If you don’t add this padding, the separator will overlap the digits.
Creating additional counters and columns
Duplicate column 1 and update content
To create a new counter, duplicate column 1. This will create a second column with all items in place automatically.
Then all you need to do is update the content of all text modules with new texts and numbers.
Duplicate column 2 and update 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 thoughts on animated counters
This simple layout with animated counters should be useful for displaying numeric data in a new and unique way. Don’t hesitate to ditch the date concept and use the counters for anything you can dream of!
For website maintenance service contact us.