How do I create an animated counter?

Site URL: https://www.orcasoundproject.com/

Hello,

On my website at the bottom of the home page I have some numbers that I would like to animate to go from 0 to the number that is already stated there. I have seen it before in some websites.

Is there an easy and free way to do this?

Thanks!

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

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!

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

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!!!

Welcome. Please contact me via DM to check it.

Please use the like button if it helps you!

Best,
Leopold

@IXStudio could you share the method to only start the animation, when scrolled to? Also i am having problems with centering the numbers

Website: ewg.squarespace.com

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

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>

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

5 minutes ago, IXStudio said:

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

@IXStudio sent you a DM.

@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. 

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. 

 

Hi

You can use it on any plans. 

Add me as admin collaborator to fix it for you.

IXStudio[dot]net[at]gmail.com

On 9/1/2021 at 12:44 AM, IXStudio said:

Hi

Hi

You can use it on any plans. 

 

Add me as admin collaborator to fix it for you.

 

IXStudio[dot]net[at]gmail.com

@IXStudio This code is not working , help please, I just added it to footer injection and linked to the text box id and section id.

<script>

var eventFired = false,
    objectPositionTop = $('section[data-section-id="62b0ba2195bb685ab4890278"]').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_1656090933211_724674 h1 strong').text(Math.ceil(this.someValue) + "%");
    }
});

 }

});

</script>

On 6/25/2022 at 4:36 AM, HunterD said:

@IXStudio This code is not working , help please, I just added it to footer injection and linked to the text box id and section id.

 

<script>

var eventFired = false,
    objectPositionTop = $('section[data-section-id="62b0ba2195bb685ab4890278"]').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_1656090933211_724674 h1 strong').text(Math.ceil(this.someValue) + "%");
    }
});

 }

});

</script>

Try adding this to top of your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

10 hours ago, tuanphan said:

Try adding this to top of your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

Doesn’t work 🙂