Hey @aadmint2021
I used the following code in my Footer Injection:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var eventFired = false,
objectPositionTop = $('section[data-section-id="5fbc069d82d4af71faa5c888"]').offset().top;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
if (currentPosition > objectPositionTop && eventFired === false) {
eventFired = true;
// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 670500}, {
duration: 10000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('section[data-section-id="5f4cc944f0feca27412aafdc"] h1').text(Math.ceil(this.someValue) + ' ' + ' kg CO2e');
}
});
}
});
</script>
Switch out the section ID for the section you're working with, and you should be able to switch h1 out for whatever size of text you're using and the 'kg CO2e' out for whatever units you need.
This code doesn't require a code block on the actual section you're using it on - it'll automatically make the h1 (or whatever size you change it to) behave like an counter
Hope that makes sense? If not, just holla.
Thank you for this! Is there a way to edit the numbers so that each #/unit group appears on its own single line? I'm also trying to figure out how to make these bigger in size but I'm a designer not a coder, and I've tried tweaking them to no avail.
I also had the same concern as @Bmosello and @taylorlaidlaw -- hoping to find a solution so that the numbers start counting as you scroll down, so that you can actually see the numbers animate!
In the below code, the data number is entered as "2.4" but shows up as "2" in the counter. Is there a workaround for this?
<h2 class="timer count-title count-number" data-to="2.4" data-speed="900"></h2>
Any help would be greatly appreciated, thanks so much!
aadmint2021 got a reaction from MMEbyKiandraTrickett in Counter widget/add on
