[Tips & Scripts] Count Up Animation

Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

tips-scripts-banner

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

🚨
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. 🚀

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

30 replies

C

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

Stefano
Userlevel 7
Badge +4

Thanks for the share, Noah!

jai

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. 🙂

Noah
Userlevel 7

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!

Stefan

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

Matt_Coady

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.

Stefan

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

erayner

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.)

Stefan

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

Stefan

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.

Matt_Coady

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 🙂

erayner

nice work around! 🙂

MPatterson22

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

Noah
Userlevel 7

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');
    }
  });  
});
P

hi @Noah very interesting job 😃

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

S

Hi Noah,
thank you very much!

Does it work also on mobile version?

Best,
Sonia

Noah
Userlevel 7

@sonji yes this should work fine on mobile!

S

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

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

Thanks 😊

S

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

😥

J

The dropbox link is no longer active (404 error file not found)

Matt_JG

Really nifty and a great tip. It worked for me, although given there’s a bit of scrolling on my page, the count-up is already finished by the time you reach that point on the page. I don’t really know the first thing about Javascript, but is there a way to delay the activation of the script until a button is clicked? Or perhaps once a certain anchor point is passed? Thanks.

B

Hi there,

Love this. But as soon as I installed, it stopped my typed text animation from working. Any idea?
See here: [How to] Create a Typed Text Effect In Unbounce

Thanks

8

Has anyone figured out how to delay the animation until the user scrolls to it?

Also, the Dropbox link is still broken 😦

Many thanks.

Kyle.C
Userlevel 5

@briadlev I think the scripts are competing with one another.

If you add them under the same variant script in the Unbounce builder, then it should work.

<script> counter data information blah blah blah… </script>
THEN!
<script> the Typed Text Effect data information blah blah blah… </script>

Basically those separate scripts are now “one” script according to Unbounce. Give that a shot and let me know if it works!

Kyle.C
Userlevel 5

@Matt_JG & @808

You can add the following (in bold) to the beginning of the count up script. Then enter in how many pixels until the animation begins. In this example, the count won’t start until the page is scrolled down 400 pixels.


  
$(window).scroll(function(){ 
  if ($(this).scrollTop() > 400){
  
$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },
  {
    duration: 8000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
    }
  });  
});

  }
});

Reply


Terms & ConditionsCookie settings