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

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

Hi

10 hours ago, fifth_element said:

@IXStudio Can I use the plugin for a regular website or only for business or eCom sites? I'm getting this message when I try to set up the plugin on the website. Please see attachment. 

 

Screen Shot 2021-08-31 at 1.10.35 PM.png

Hi

You can use it on any plans. 

 

Add me as admin collaborator to fix it for you.

 

IXStudio[dot]net[at]gmail.com

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...