Looking to add an Unbounce count up animation?
Look no further as I cover that in this exact post. 😊
It’s another cool little addition to your site that can add more credibility as it shows the number of people or countries or whatever you want to add that involved you in some aspect.
And this animation just adds a cool little touch to it that makes it look more unique and professional.
Also, check out my previous posts on how to add a dynamic character count to your form, and how to add a mobile hamburger menu.
That being said, let’s get into it and create our Unbounce count up animation!
Step 1: Add the text that you want to show up on your site as well as the number
Grab the text element and just add some words or a sentence or something to your page to say whatever you want it to, such as “this is the number of people who signed up” or whatever you want it to say.
Then add the actual number.
DO NOT add the final number – add the STARTING number that will show up before counting up.
In our case, that number was 0 – so this animation was counting up from 0 to 501 in our case.
But the number doesn’t have to be 0… make it whatever you want it to be, just decide on a starting number and set it.
Step 2: Add the JavaScript code to your page
Head over to this Unbounce community website.
And grab the code provided as shown in the video.
Copy this code and paste it in the “before body end tag” section of the page.
On line 14 of this code, set the duration of the count up timer – by default it’s 8000 ms (8 seconds), but you can set it to be whatever you want it to be.
I think 2000-4000 ms is a good number and a bit faster than the slow 8 seconds.
You don’t have to do anything else in this JavaScript code – let’s move on to the next and final step of adding an Unbounce count up animation.
Step 3: Edit the source code of your number
Lastly, you need to add some text to the number source code of the text element that you added.
So double-click the number, and right after the beginning “span” tag, add the following:
class=”counter” data-count=”501″
You should have this in between the “span” and the “style” of the source code.
Replace the number “501” with whatever final number YOU want it to be.
So in our case, since we set the number to 0 and made this data-count to 501, our number went from 0 to 501 in the 4 second time that we set. You can make yours whatever you want it to be.
Hit “Save”, then “Publish” and you are good to go.
Keep in mind that the timer starts as soon as the page loads – so if you load the page, wait a few seconds, and THEN scroll to the timer, the number will already be set at the max – so keep that in mind when designing this, as it’s probably better to have it somewhere at the top of the page so the user actually sees the count up animation.
And that’s it!
👉 Free Unbounce 14 day trial + 20% off for the next 3 months
👉 My Unbounce playlist so you can find every important piece you need
👉 Check out my courses!
👉 Like my Facebook page!
