Counter.js to start when div is in view

Hi,

Im hoping someone could help me with some Javascript.
On my website (Page called home), I have an ‘our work’ section with some CMS projects. Each project has two statistics that I’ve applied the counter.js script to. It works great.

However, I would like to take it a step further and hide the div called, floating-animated-stats-wrapper so they only appear for each project on hover. Ive done the animation setup with interactions however when I apply the interaction the counter.js stops working. Is there a way to get counter.js to work only when a div is in view?
At the moment all the numbers for all the projects start at the same time rather than when each project is in view.

Any help is greatly appreicated!
Here is the read only link to the site:

https://preview.webflow.com/preview/assembledmediatesting?utm_medium=preview_link&utm_source=dashboard&utm_content=assembledmediatesting&preview=9c4d0a50dffb599d0f0c6d6540736ac7&workflow=preview

Thanks,
Ash


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

In order to have each div activate independently, you need to bind event listeners to each of them waiting for a mouse hover, and then only should it activate the counter for that specific div.

below I’ve provided code that should work when pasted in between the script tags you have in the “Before body tag” section

jQuery(document).ready(function ($) {
    $(".counterup").each(function () {
        $(this).mouseenter(function () {
            $(this).counterUp({
                delay: 10, // the delay time in ms
                time: 1500, // the speed time in ms
            });
        });
    });
});