Jump to content

How do I make an animated counter start only when you scroll and get to the specific section?

Recommended Posts

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

Hello,

I have created an animated counter with the help of a code injection at the bottom of the landing page. However it starts the counter when loading the page instead of when you scroll to the section defeating the point of the animation as you never get to see it. 

Is there any code to make start the animation only when you scroll to the desired section?

Here is the code I've used for the animation:

<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: 5}, {
    duration: 2000,
    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_1601088407765_22146 h2').text(Math.ceil(this.someValue) + "");
    }
});
});
</script>

 

Thanks!

Link to comment
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.