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 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi @Theis_Aarlund Use this code and add your other counters.   <script> var eventFired = false, objectPositionTop = $('section[data-section-id="5e8c4a5a0d1a452372558c60"]').offset(

@IXStudio sent you a DM.

10 answers to this question

Recommended Posts

  • 1

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
  • 0

Hi @Theis_Aarlund
Use this code and add your other counters.

 

<script>

var eventFired = false,
    objectPositionTop = $('section[data-section-id="5e8c4a5a0d1a452372558c60"]').offset().top;

$(window).on('scroll', function() {

 var currentPosition = $(document).scrollTop();
 if (currentPosition > objectPositionTop && eventFired === false) {
   eventFired = true;
   // your code


// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 42}, {
	duration: 1000,
	easing:'swing', // can be anything
	step: function() { // called on every step
		// Update the element's text with rounded-up value:
		$('#block-yui_3_17_2_1_1604658444212_14894 h2#employees').text(Math.ceil(this.someValue) + "%");
	}
});

 }

});

</script>

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
On 11/6/2020 at 3:05 PM, IXStudio said:

Hi @Theis_Aarlund
Use this code and add your other counters.

 



<script>

var eventFired = false,
    objectPositionTop = $('section[data-section-id="5e8c4a5a0d1a452372558c60"]').offset().top;

$(window).on('scroll', function() {

 var currentPosition = $(document).scrollTop();
 if (currentPosition > objectPositionTop && eventFired === false) {
   eventFired = true;
   // your code


// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 42}, {
	duration: 1000,
	easing:'swing', // can be anything
	step: function() { // called on every step
		// Update the element's text with rounded-up value:
		$('#block-yui_3_17_2_1_1604658444212_14894 h2#employees').text(Math.ceil(this.someValue) + "%");
	}
});

 }

});

</script>

Please use the like button if it helps you!

Best,
Leopold

Hi @IXStudio

 

The code you supplied worked wonders for the Employees counter, but i have not been able to get it working with any of the other. I changed up a bit of the code, so that it would target another block, but i cannot get it working...

This is the code, that i wrote for the "Miles of CableGuard wrapping strip used". 

<script>
// wrap
var eventFired = false,
    objectPositionTop = $('section[data-section-id="5e8c4a5a0d1a452372558c60"]').offset().top;

$(window).on('scroll', function() {

 var currentPosition = $(document).scrollTop();
 if (currentPosition > objectPositionTop && eventFired === false) {
   eventFired = true;
   // your code


// Animate the element's value from 0 to 42:
jQuery({someValue: 0}).animate({someValue: 1693}, {
	duration: 7000,
	easing:'swing', // can be anything
	step: function() { // called on every step
		// Update the element's text with rounded-up value:
		$('#block-yui_3_17_2_1_1604658610318_15620 h2 #wrap').text(Math.ceil(this.someValue) + "");
	}});}});
</script>

 

Edited by Theis_Aarlund
Link to post
  • 0
19 minutes ago, Theis_Aarlund said:

The code you supplied worked wonders for the Employees counter, but i have not been able to get it working with any of the other.

Hi,
Please contact me via DM or Skype: "Leopoldjobs" to check it for you

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

Create an account or sign in to comment

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


×
×
  • Create New...