Animated number counters are popular throughout the web as a means to display numerical data to highlight the value of services, case studies, and more. Divi has a dedicated number counter module that can be used to generate animated number counters with ease.

However, in this tutorial, we are going to show you how to create number counters that animate on scroll using Divi. Using Divi’s position options and scroll effects, we will design a simple layout to display a date with scrolling numbers.

Check it out!

Sneak Peek

Here is a quick look at the scroll animated counters we will be designing in Divi.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the layout to your page, simply extract the zip file and drag the JSON file into the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Part 1: Creating the Title Section

In this first part, we are going to create a simple title for the layout.

First, add a one-column row to the section.

divi scroll animated number counters

Then add a new text module to the row.

divi scroll animated number counters

Update the text module content with the following:

<h2>Save The Date<h2>

divi scroll animated number counters

Then update the heading text style as follows:

  • Heading 2 Font: Prata
  • Heading 2 Text Size: 130px (desktop), 70px (tablet), 40px (phone)

divi scroll animated number counters

Part 2: Creating the Counters with Scroll Animation

In this next part, we will create the three counters that will animate numbers on scroll until coming to rest to display a date (month, day, and year). Each counter will be built using a total of 5 text modules and a divider module. The first text module will serve as the label of the counter (ie. month, day, year). The next four text modules will each hold a different number (in progression) that will be animated on scroll using the vertical motion offsets in Divi. The bottom divider module will help hide the overflow of the numbers.

Here’s how to do it.

Add Second Row

Under the existing row, add another one-column row.

divi scroll animated number counters

Row Settings

Before adding any module, update the row settings as follows:

  • Gutter Width: 1
  • Padding: 0px top, 0px bottom

divi scroll animated number counters

Column Settings

Then open the settings for the column and update the padding as follows:

  • Padding (desktop): 100px bottom
  • Padding (tablet and phone): 0px bottom

divi scroll animated number counters

Add Text Module

Then add a text module to the column.

divi scroll animated number counters

Content/Label

For the text module content, add the word “Month”.

divi scroll animated number counters

Text Design Settings

Once the content is added, update the design settings as follows:

  • Background Color: #ffffff
  • Text Font: Prata
  • Text Text Size: 40px
  • Text Line Height: 2em
  • Width: 100%
  • Padding: 20px top, 20px bottom, 20px left, 20px 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

divi scroll animated number counters

Add Text Module for First Number

Once the first text module is in place, we can start adding the numbers that will move on scroll. To add the first number,  add a new text module under the existing “Month” text module.

divi scroll animated number counters

Add Number/Content

Then update the text module label to read “num1” for easier reference. Then update the content with the number “01”.

divi scroll animated number counters

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

divi scroll animated number counters

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
  • Starting Offset: 1 (at 10%)
  • Mid Offset: 0 (at 20%)
  • Ending Offset: -1 (at 30%)

Under the Fading In and Out tab, update the following:

  • Enable Fading In and Out: YES
  • Starting Opacity: 0% (at 10%)
  • Mid Opacity: 100% (at 20%)
  • Ending Opacity: 0% (at 30%)

Make sure to set the motion effect trigger to the top of the element:

  • Motion Effect Trigger: Top of Element

divi scroll animated number counters

Create The Text Module for Second Number

Duplicate First Number

Once the first number has been created, duplicate it to create the text module for the second number. Then update the label in the layers view for better reference.

divi scroll animated number counters

Update Number/Content

Open the settings for the second number text module and update the content with the number “02”.

divi scroll animated number counters

Update Position

Then update the position options as follows:

  • Position: Absolute
  • Vertical Offset: 126px

divi scroll animated number counters

Update Scroll Effects

Then update the scroll effects as follows:

Under the Vertical Motion Tab, update the following:

  • Starting Offset: 1 (at 20%)
  • Mid Offset: 0 (at 30%)
  • Ending Offset: -1 (at 40%)

Under the Fading In and Out tab, update the following:

  • Starting Opacity: 0% (at 20%)
  • Mid Opacity: 100% (at 30%)
  • Ending Opacity: 0% (at 40%)

divi scroll animated number counters

Create Text Module for Third Number

Duplicate Second Number

To create the text module for the third number, duplicate the text module for the second number.

divi scroll animated number counters

Update Number/Content

Update the content with the number “03”.

divi scroll animated number counters

Update Scroll Effects

Then update the scroll effects:

Under the Vertical Motion Tab, update the following:

  • Starting Offset: 1 (at 30%)
  • Mid Offset: 0 (at 40%)
  • Ending Offset: -1 (at 50%)

Under the Fading In and Out tab, update the following:

  • Starting Opacity: 0% (at 30%)
  • Mid Opacity: 100% (at 40%)
  • Ending Opacity: 0% (at 50%)

divi scroll animated number counters

Create Text Module for Fourth Number

Duplicate Third Number

To create the fourth number for the scroll counter, duplicate the text module for the third number.

divi scroll animated number counters

Update Number/Content

Update the content with the number “04”.

divi scroll animated number counters

Update Scroll Effects

Then update the scroll effects:

Under the Vertical Motion Tab, update the following:

  • Starting Offset: 1 (at 40%)
  • Mid Offset: 0 (at 50%)
  • Ending Offset: 0 (at 60%)

Under the Fading In and Out tab, update the following:

  • Starting Opacity: 0% (at 40%)
  • Mid Opacity: 100% (at 50%)
  • Ending Opacity: 100% (at 60%)

divi scroll animated number counters

Add Bottom Divider

Under the last text module, add a new divider module. This will be used to hide the bottom overflow of the text that will be scrolling into view.

divi scroll animated number counters

Then select NOT to show the divider.

divi scroll animated number counters

Style and Position Settings

Update the design for the divider as follows:

  • Background Color: #ffffff
  • Width: 100%
  • Height: 100px
  • Top Border Width: 5px

Under the advanced tab, update the following:

  • Disable on: Phone and Tablet
  • Position: Absolute
  • Location: Bottom Left

IMPORTANT: The space that the divider will occupy was created earlier by adding a bottom padding of 100px to the column. If you don’t add that padding, the divider will overlap the numbers.

divi scroll animated number counters

Creating More 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 the elements in place automatically.

Then all you need to do is update the content for all the text modules with new text and numbers.

divi scroll animated number counters

Duplicate Column 2 and Update Content

Once the content for all the text modules have been updated in column 2, duplicate column 2 to create a third counter for the year. Then update the content for each text module as needed.

divi scroll animated number counters

Final Result

Here is the final result.

Final Thoughts

This simple layout with scroll animated number counters should come in handy for displaying numerical data in a fresh and unique way. Feel free to abandon the date concept and use the counters for anything you can dream up!

I look forward to hearing from you in the comments.

Cheers!

The post How to Create Scroll Animated Number Counters with Divi appeared first on Elegant Themes Blog.