Code for Number Counter (Solved)

1. Download the file package from: https://nicepage.com/qt/41839/counter-synergy-design-squarespace-template

2. Upload only nicepage.js into Squarespace. (Create a text link. Link the text to a file. Upload nicepage.js file. Delete the link. File is now uploaded to Squarespace's backend.) Note: This is where it's a bit of a hack bc I'm not well-versed in Javascript, so I just uploaded the entire .js file without editing. Others more knowledgeable might want to edit the .js file to only include the number counter code bit to cut down on webpage load times.

3. Under Settings > Advanced > Code Injection > Header, paste the following code:

<!-- Installing Number Counter -->
<script class="u-script" type="text/javascript" src="/s/nicepage.js" defer></script>

4. This is the HTML for one number. Add as a code block, which Squarespace will naturally make responsive if multiple code blocks/numbers are added in a row.

Note:

• I love how I can just add any additional text in front of or after the number and the number counter will still work. See attached screenshots.
• Numbers are set to animate on "scroll," and animation duration is set to 3000, both of which can be further customized if need-be.

<section id="carousel_9139">
  <div style="text-align: center">
    <!--Replace img link here--><img src="/s/counter1.png" alt="">
    <h1 data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000" style="margin-top: 0; margin-bottom: 0;">
      <!--Edit number here-->1,255 Customers
    </h1>
    <p class="sqsrte-large">
      <!--Edit copy here-->Served Annually Through Education Programs 
    </p>
  </div>
</section>

See attached video to see how it looks on two pages on my site: