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

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!

Hi. Have you fixed this yet?

no, still got the problem!

@tuanphan Do you know a possible solution to this? I have a similar problem where my counter counts on page entry, any help would be really appreciated 🙂