[Tips & Scripts] Count Up Animation


#1

If you’ve been reading up on Oli Gardner’s recent ebook 23 Actionable Landing Page Design Principles That’ll Boost Conversions, you’ll notice that the second principle on the list is none other than motion.

Unfortunately, it’s ridiculously easy to go overboard with motion on the web… so the trick is finding a happy medium that catches the eye of your potential lead without giving them nausea inducing motion sickness.

We personally love this example from Optimizely which illustrates just how many optimized experiences their platform has powered.

This solution shows you how to add a simple ‘Count Up/Down’ animation to your page. This is a quick and delightful way of calling attention to some of the more impressive stats on your landing page.

See this effect in action on a live Unbounce page here:
https://landingpage.noahmatsell.ca/count-up-animation


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Optional

Download the .unbounce template for this script here:
Count Up Animation unbounce template

Scripts Needed

Grab the latest Javascript here:
https://gist.github.com/noahub/822c6fe369a4bce6cb03667a04a46812

Instructions

Step 1.
Paste the Javascript code in the Javascript section with placement ‘Before Body End Tag’. On line 14, you have the option to set the duration of the animation (in ms).

Step 2.
Create a textbox element and enter a number. This will be your starting number.

Step 3.
With the text editor still open, click the ‘Source’ button.

Step 4.
Add the ‘counter’ class and the data-count attribute to the innermost span surrounding your number. Here’s an example of what this should look like:

The value of the data-count attribute is the target number for your counter. In the example above it is set to 20000.

Step 5.

If your number isn’t surrounded by a span, add a new one!

Step 6.

Save and publish.


Testing

Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion

We’ve given you the ground work, but we would love to see how you implement this on your own pages. This is your chance to get creative and show the Unbounce community how you’re using this.

Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!


Can’t see the instructions? Log in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


[How to] Create a Typed Text Effect In Unbounce
Any way to add countdown timer or urgency?
The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

Awesome! Thanks for sharing I can’t wait to test this out.


#3

Thanks for the share, Noah!


#4

This works really smooth and looks so good.

Just want to know if somehow it is possible to start the counting when a visitor scrolls down to a specific area.

Because if we put the numbers at the bottom of the page, the ‘count up animation’ gets finished (reaches the highest number) till the time visitor reaches to that part.

Anyways thank you very much for this. It has made my website looking way more attractive. :slight_smile:


#5

Hey @jai, I definitely understand your use-case here. While I don’t have anything written for this, you should be able to repurpose the script in the following article (will require a bit of Javascript knowledge): [Tips & Scripts] On-Scroll Animations

I hope this helps point you in the right direction!


#6

Hi Noah, thanks for putting this together. I just tried it out and it works great. Do you know if there’s a simple change that can be done to have it count down to a specific #? I’m thinking of trying this out to show a price decreasing down to our price point. Thanks!

-Stefan


#7

Hey @Stefan ,

Open the text in the text editor and open the source. Look for a bit like this:

<span class="counter" data-count="79" style="font-size: 68px;">1</span>

The number in data-count (79 in this example) is the end and the number before the span close (the 1) is the start. The script simply works in either direction.


To make it more money like find in the custom javascript area, these lines:

  $this.text(Math.floor(this.countNum));

and:

  $this.text(this.countNum);

and change them to this:

  $this.text("$" + Math.floor(this.countNum));

and this (respectively):

  $this.text("$" + this.countNum);

Then you’ll have dollar signs in front of the number:


One more custom effect, in the custom js area, if you change the word ‘linear’ to the word ‘swing’ the animated countdown will slow down near the end before coming to a stop instead of counting down at a consistent pace. This one is purely cosmetic.


#8

Very cool, thanks Matt. I was able to make the changes and see the $ in there. One last question :slight_smile:, any idea if it will accept decimals? I added them into the source but the page now just show the # before the decimal.


#9

Im probably way wrong but you might have to use the long tailed word for ‘.’

I think it’s &-#-4-6; (Please remove the '-'s out of that little code.)


#10

Thanks @erayner, I’ll give it a try.


#11

So close! I gave it a try in the source and it looked like it was going to work but it swapped it back to the decimal in the source and the published page still just shows the first number. I’ll dig around and see if there’s something else to tweak. Thanks again @erayner.


#12

Hey @Stefan

Change the numbers to pennies, so if it was 1 & 79 it’ll now be 100 & 7900. Then in the script divide the output by 100. We’ll also have to add a method called “toFixed(2)” because javascript removes any trailing zeros. So the lines end up looking like this:

  $this.text("$" + (this.countNum / 100).toFixed(2));

(you can use the same code for both script lines)

Cheers :slight_smile:


#13

nice work around! :slight_smile:


#14

Hey Noah! Is there a way to add commas to larger numbers? Adding them right to the source returns not a number. Thanks!


#15

Interesting question @MPatterson22!

I was able to accomplish this using the following updated script. Give it a try and let me know what you think!

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
  
$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {
    duration: 3000,
    easing:'linear',
    step: function() {
      $this.text(numberWithCommas(Math.floor(this.countNum)));
    },
    complete: function() {
      $this.text(numberWithCommas(this.countNum));
      //alert('finished');
    }
  });  
});

#16

hi @Noah very interesting job :smiley:

i need to add to this script the possibilite to count larger numbers like : “$346.236” (with dots)

so i change the script and it turns like this :

this.text("" + “346.”+ Math.floor(this.countNum));

this.text("" + “346.” + this.countNum);

and its works! :smiley:


#17

Hi Noah,
thank you very much!

Does it work also on mobile version?

Best,
Sonia


#18

@sonji yes this should work fine on mobile!


#19

No, for me it doesn’t work…
If you want to see, this is my page

http://scopri.daybreakhotels.com/regalo-coppia/

Thanks :blush:


#20

Also it doesn’t work also for desktop version…
Anyone can help me, please?

:disappointed_relieved: