Start animation when the section is scolled into view

I have an animation on my webpage where stat numbers count up to reach to a target number. I want this animation to start only when this section scrolls into view, otherwise the animation will already be donw by the time the user gets to that section!
How can I do that?
Here is a link:
[ https://www.boneiolam.org/index2#services](https://www.boneiolam.org/index2#services)
The numbers in the circles count up

There are indeed many plugins for this, but if it's just for this one animation then you can/should do it without a plugin. I see you use a jquery plugin for the counters and trigger them on page load, but you have to trigger them when the circles div is in the viewport.

So with the code from that 'do it without a plugin' article, you could do something like this:

Thank you! That worked to make the animation start only once it is in the browser viewport. However, each time I scroll in that section, it starts again from zero, even if the animation is not done. How can I avoid that?

You run the timer as soon as you scroll and not when the circles div is in the viewport, because your forgot to wrap it inside if ($('.circles').isInViewport()) { ... )

The second things is that you wrote the .countTo(start) ({..}) wrong. That should have been .countTo({...}).

I was playing myself a bit with it too and I've noticed that the numbers were indeed acting a bit weird even when I had fixed your errors and yes, it was also resetting to 0 when I scrolled a bit more up and/or down while the counter was not finished yet.
I've fixed this by using the onUpdate: callback function to turn the window scroll and resizze events off once the counters had started

I gave the window scroll and resize events a name of count, so that I can/should only turn these off and not possible other scroll or resize events that you (might) use for the other animations on the page.

I've also added a -500px offset in the viewport function, see below, so that the counters start a bit earlier while the circles div is noi fully yet at the top the viewport.

Thank you! This is exactly what I needed, but the part that was formatting the number to include a comma is not working anymore. Do you know how I can set it to format the number correctly?
Thanks again