How To Add An Animated Counter in Squarespace

I happened to be poking around in my Google Search Console and discovered people were coming to my site to learn how to add an animated counter to their Squarespace site, but to no avail!  So, I thought I'd rectify that now.  

What we are going to be adding, specifically, is an animated counter that starts only when it's scrolled to.  Not only that, but I'm going to show you how to adjust the code (easily!) to allow for more counters.

1. Create a code block 

Place it where you'd like the animated counter to appear. 

2. Copy and paste code into block

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-4 counter-value" data-count="300" data-desc="Happy Clients">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="400" data-desc="Cups of Coffee">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="1500" data-desc="Lines of Code Written">0</div>
</div>


<style>
 .counter-value { 
    font-size: 60px;
   line-height:2em;
   text-align:center;
   padding:17px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 14px;
    line-height:1.2em;
  }
</style>

NOTE:  Make sure it's on HTML and "Display Source" is unchecked.

ANOTHER IMPORTANT NOTE:  I've included jquery in this code but DO NOT add this if it is already loaded on your site.  Too many broken code snippets I've seen because too many different versions of jquery were included.  Don't do it!  (And if you have no idea what I'm talking about, leave a comment below - happy to explain further!)  

3. Edit To Your Hearts Content

The only code you'll need to edit in order to adjust this to suit your needs is the following:

 
<div id="counter">
    <div class="sqs-col sqs-col-4 counter-value" data-count="300" data-desc="Happy Clients">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="400" data-desc="Cups of Coffee">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="1500" data-desc="Lines of Code Written">0</div>
</div>
 

It's pretty self-explanatory where to customize the text.  But if it's not clear, please leave a comment below.

Now, if you want to add/delete a counter, just add/delete a 'counter-value' div then update the 'sqs-col-4' class.  Just remember that the number at the end of must add up to 12.

For example, if you only want two counters.  You'd update the code above to look like this:  

 
<div id="counter">
    <div class="sqs-col sqs-col-6 counter-value" data-count="300" data-desc="Happy Clients">0</div>
  <div class="sqs-col sqs-col-6 counter-value" data-count="400" data-desc="Cups of Coffee">0</div>
</div>
 

The reason why I'm using the 'sqs-col-*' naming convention here is only to re-use the responsive grid-based code that Squarespace inherently uses.  

DEMO:

0
0
0
 

Happy scroll-to-animating-counting!

And that's it!  Now keep in mind, this is a basic example. If you want options like decimal points, easing animation, or duration - you'll want this jquery plugin.  

Hope this works for you! Let me know of any issues in the comments below.