[Tips & Scripts] Count Up Animation

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

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.

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

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

Also, the Dropbox link is still broken :frowning:

Many thanks.

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

@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);
    }
  });  
});

  }
}); 

Hi Kyle

This is a great idea! However it caused the timer to reset every time I scrolled. Is there a way to enable the countdown based on an element visibility trigger?

Hey Shaun,

Referencing this earlier comment you can make it happen.

Hi Noah, Great work on this. I wasn’t able to get it working with commas though. I switched out the original script for this one. My text box says 1,000,000. Is that the problem?