Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I create an animated counter?


cloudier

Question

  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

Hi,

Insert this code in your Footer Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 110}, {
	duration: 1000,
	easing:'swing', // can be anything
	step: function() { // called on every step
		// Update the element's text with rounded-up value:
		$('#el').text(Math.ceil(this.someValue) + "%");
	}
});
});
</script>

Add code block to the page and insert below code.

<span id="el">0</span>

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0

Hello,

Thanks for the above.

I have tried it but has resulted to be unsuccessful sadly. 

Not sure how to apply it to the end of the home page where the numbers are I think, would you mind to help me please?

Cheers!

Link to post
  • 0

Hi,
Just change the #el with your Tag (conter text) ID.

$('#block-5f6e8f758bc6782718545f0f h2').text(Math.ceil(this.someValue) + "%");

Use the above code.
 

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 0

It works thanks, the only thing is that by the time you have scrolled down it already has counted it up. Any chance there is a code to make it wait till you scroll to the section?

Thanks so much!!!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...