Animate Numbers to Grow

Trying to get these numbers to do the animation where they grow as you scroll to them. See example below. Here is a screenshot of my website page with and without the block IDs. Site is not live yet. Any help is much appreciated! Thank you in advance. 

Hi,

Dou you know an example? We can help easier

@tuanphan Yes. If you look at that screen recording you will see an example. I believe you guys answered a similar question before and provided code. But I just can't get it to work for my site. 

@tuanphan Let me know if there is anything you can help me with on this one. I've tried just about everything. Thanks in advance!

On 8/17/2022 at 11:33 PM, bmoliver said:

@tuanphan Yes. If you look at that screen recording you will see an example. I believe you guys answered a similar question before and provided code. But I just can't get it to work for my site. 

 

 

Which code you used in thread & can you share link to page where you added code on your site?

@tuanphan I used this code:

<script>
// how many seconds do you want it to animate?
var animateSeconds = 2;

/* Do Not Edit Below Here */
function isInViewport(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

whenReady = function (readyFunc, actionFunc, options) {
    if (readyFunc()) {
        actionFunc.apply(this);
    } else {
        if (!options) options = {};
        if (!options.current) options.current = 0;
        if (!options.max) options.max = 60000;
        if (!options.interval) options.interval = 500;
        if (options.current < options.max) {
            setTimeout(function () {
                options.current += options.interval;
                whenReady(readyFunc, actionFunc, options);
            }, options.interval);
        } else if (options.ontimeout) {
            options.ontimeout();
        }
    }
    return true;
};

whenReady(

    function () {
        return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length;
    },

    function () {
        // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180");
        var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967");
        // save first number
        var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1");
        var projectsNum = +projects.textContent;
        // save second number
        var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1");
        var clientsNum = +clients.textContent;
        // save third number
        var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1");
        var ongoingNum = +ongoing.textContent;
        
        // set all numbers to zero
        projects.textContent = clients.textContent = ongoing.textContent = 0;
 
        function animateNumbers() {
            if (isInViewport(spacerBar) && !window.numbersAnimated) {
                // animate the numbers back to their original. over X seconds.
                var curProjects = 0, curClients = 0, curOngoing = 0;
                var animating = setInterval(function(){
                    curProjects += projectsNum / (animateSeconds * 100);
                    curClients += clientsNum / (animateSeconds * 100);
                    curOngoing += ongoingNum / (animateSeconds * 100);
                    projects.textContent = Math.floor(curProjects);
                    clients.textContent = Math.floor(curClients);
                    ongoing.textContent = Math.floor(curOngoing);
                }, 10);

                window.numbersAnimated = true;

                // turn off the interval after X seconds
                setTimeout(function(){
                    clearInterval(animating);

                    // set the numbers to their original
                    projects.textContent = projectsNum; 
                    clients.textContent = clientsNum;
                    ongoing.textContent = ongoingNum;

                },  animateSeconds * 1000);

            }
        }

        // if page loads and numbers are visible
        animateNumbers();

        // when scrolling
        window.addEventListener('scroll', animateNumbers);



    }, // action function
    { //this is only necessary if you need to do something on timeout.
        ontimeout: function () {
            console.log('*** Timing out ***');
        }
    } //ontimeout // action function
); // whenReady
</script>

I want to put it on my homepage. Right now we just have a coming soon page. The homepage is not live yet. https://clover-grey-j79y.squarespace.com/home

On 8/21/2022 at 9:18 PM, bmoliver said:

@tuanphan I used this code:

<script>
// how many seconds do you want it to animate?
var animateSeconds = 2;

/* Do Not Edit Below Here */
function isInViewport(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

whenReady = function (readyFunc, actionFunc, options) {
    if (readyFunc()) {
        actionFunc.apply(this);
    } else {
        if (!options) options = {};
        if (!options.current) options.current = 0;
        if (!options.max) options.max = 60000;
        if (!options.interval) options.interval = 500;
        if (options.current < options.max) {
            setTimeout(function () {
                options.current += options.interval;
                whenReady(readyFunc, actionFunc, options);
            }, options.interval);
        } else if (options.ontimeout) {
            options.ontimeout();
        }
    }
    return true;
};

whenReady(

    function () {
        return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length;
    },

    function () {
        // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180");
        var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967");
        // save first number
        var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1");
        var projectsNum = +projects.textContent;
        // save second number
        var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1");
        var clientsNum = +clients.textContent;
        // save third number
        var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1");
        var ongoingNum = +ongoing.textContent;
        
        // set all numbers to zero
        projects.textContent = clients.textContent = ongoing.textContent = 0;
 
        function animateNumbers() {
            if (isInViewport(spacerBar) && !window.numbersAnimated) {
                // animate the numbers back to their original. over X seconds.
                var curProjects = 0, curClients = 0, curOngoing = 0;
                var animating = setInterval(function(){
                    curProjects += projectsNum / (animateSeconds * 100);
                    curClients += clientsNum / (animateSeconds * 100);
                    curOngoing += ongoingNum / (animateSeconds * 100);
                    projects.textContent = Math.floor(curProjects);
                    clients.textContent = Math.floor(curClients);
                    ongoing.textContent = Math.floor(curOngoing);
                }, 10);

                window.numbersAnimated = true;

                // turn off the interval after X seconds
                setTimeout(function(){
                    clearInterval(animating);

                    // set the numbers to their original
                    projects.textContent = projectsNum; 
                    clients.textContent = clientsNum;
                    ongoing.textContent = ongoingNum;

                },  animateSeconds * 1000);

            }
        }

        // if page loads and numbers are visible
        animateNumbers();

        // when scrolling
        window.addEventListener('scroll', animateNumbers);



    }, // action function
    { //this is only necessary if you need to do something on timeout.
        ontimeout: function () {
            console.log('*** Timing out ***');
        }
    } //ontimeout // action function
); // whenReady
</script>

 

I want to put it on my homepage. Right now we just have a coming soon page. The homepage is not live yet. https://clover-grey-j79y.squarespace.com/home

Try this new code

<script>
// how many seconds do you want it to animate?
var animateSeconds = 2;

/* Do Not Edit Below Here */
function isInViewport(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

whenReady = function (readyFunc, actionFunc, options) {
    if (readyFunc()) {
        actionFunc.apply(this);
    } else {
        if (!options) options = {};
        if (!options.current) options.current = 0;
        if (!options.max) options.max = 60000;
        if (!options.interval) options.interval = 500;
        if (options.current < options.max) {
            setTimeout(function () {
                options.current += options.interval;
                whenReady(readyFunc, actionFunc, options);
            }, options.interval);
        } else if (options.ontimeout) {
            options.ontimeout();
        }
    }
    return true;
};

whenReady(

    function () {
        return document.querySelectorAll("div#block-yui_3_17_2_1_1659402490648_68512").length;
    },

    function () {
        // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180");
        var spacerBar = document.querySelector("div#block-yui_3_17_2_1_1659402490648_68512");
        // save first number
        var projects = document.querySelector("div#block-yui_3_17_2_1_1659402490648_68512 h1");
        var projectsNum = +projects.textContent;
        // save second number
        var clients = document.querySelector("div#block-yui_3_17_2_1_1659402490648_82308 h1");
        var clientsNum = +clients.textContent;
        // save third number
        var ongoing = document.querySelector("div#block-yui_3_17_2_1_1659402490648_98943 h1");
        var ongoingNum = +ongoing.textContent;
        
        // set all numbers to zero
        projects.textContent = clients.textContent = ongoing.textContent = 0;
 
        function animateNumbers() {
            if (isInViewport(spacerBar) && !window.numbersAnimated) {
                // animate the numbers back to their original. over X seconds.
                var curProjects = 0, curClients = 0, curOngoing = 0;
                var animating = setInterval(function(){
                    curProjects += projectsNum / (animateSeconds * 100);
                    curClients += clientsNum / (animateSeconds * 100);
                    curOngoing += ongoingNum / (animateSeconds * 100);
                    projects.textContent = Math.floor(curProjects);
                    clients.textContent = Math.floor(curClients);
                    ongoing.textContent = Math.floor(curOngoing);
                }, 10);

                window.numbersAnimated = true;

                // turn off the interval after X seconds
                setTimeout(function(){
                    clearInterval(animating);

                    // set the numbers to their original
                    projects.textContent = projectsNum; 
                    clients.textContent = clientsNum;
                    ongoing.textContent = ongoingNum;

                },  animateSeconds * 1000);

            }
        }

        // if page loads and numbers are visible
        animateNumbers();

        // when scrolling
        window.addEventListener('scroll', animateNumbers);



    }, // action function
    { //this is only necessary if you need to do something on timeout.
        ontimeout: function () {
            console.log('*** Timing out ***');
        }
    } //ontimeout // action function
); // whenReady
</script>