animated counters

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.

animated counters

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.

Leave a comment

echo "";