Unbounce: How to Add a Count Up Animation

👉 Free Unbounce 14 day trial + 20% off for the next 3 months: https://unbounce.grsm.io/ivan?sid=u-countup-1

👉 Community post with the code as shown in the video: https://community.unbounce.com/t/tips-scripts-count-up-animation/2908

👉 My Unbounce playlist so you can find every important piece you need: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

👉 Check out my courses!: https://www.ivanmana.com/all-courses

Hey all – in this video I show you how to add a count up animation to your Unbounce page(s).

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.

That being said, let’s get into it!

✔ 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 the website that I linked above:

👉 https://community.unbounce.com/t/tips-scripts-count-up-animation/2908

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.

✔ 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!

👉 Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

👉 Thanks for watching, and I’ll see you in the next video!

source