Adding simple animated numbers that count up to website

Site URL: http://www.hetproductions.com

I am trying to find a way to Add animated numbers that count up to my website. I would like it to be similar to this website https://desiremedia.com.au/

Does anyone know a way to do this for the number on my site?

Thanks

It looks like there is a plugin here that supports what you are looking for - https://elfsight.com/number-counter-widget/squarespace/

I have not used this specific plugin, but everything I have used from elfsight has worked exceptionally well. Many of their widgets are free up to a certain number of page views, or relatively inexpensive if you pay. 

Good luck!

I found that in my searching before. I'm looking for something free and easy to use. I spoke with someone from ghostplugins.com and they said they are in the process of creating one now and should have it ready by next week.

How about this? I have it set to animate for 2 seconds, but you can change that.

<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>

Hi! 
@Sienawalker Thanks for recommending us!!! We're happy you like our service. 😊

@hawaiiestatetours If you're still interested, try our Free Lite plan, it's fully-featured and has no limitation in time. Contact our Support Team and we'll be glad to find a solution for your needs! 

Regards, 
Elfsight

12 hours ago, tazmeah said:

How about this? I have it set to animate for 2 seconds, but you can change that.

<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>

 

Screen Recording 2020-12-30 at 5.21.10 AM.mov

Looks perfect in the video you sent, but when I tried adding it, it shows a Syntax error on line 1. 

sorry. If you're using it as Code Injection, remove the first and last lines. Thanks.

16 hours ago, tazmeah said:

sorry. If you're using it as Code Injection, remove the first and last lines. Thanks.

Got it to work by adding the code into the header. You are the man! searched everywhere online and you are the only one that knew what to do. Really appreciate it.

I tried the code you provided and it's living the box with "script disabled". I added a code block, placed it there and no luck. Any suggestions?

On 12/30/2020 at 3:23 AM, tazmeah said:

How about this? I have it set to animate for 2 seconds, but you can change that.

<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>

 

Any chance you'd know why this code, in a code block, is saying "script disabled"?

6 hours ago, Redemption said:

Any chance you'd know why this code, in a code block, is saying "script disabled"?

script disabled on editor but it will run when preview site

I am trying to do this on a Square Space website as well. When I add a Code block from tazmeah and copy the code in it says "Script Disabled" and even when I preview the site there it does not work. Any suggestions?

4 hours ago, AButterfield said:

I am trying to do this on a Square Space website as well. When I add a Code block from tazmeah and copy the code in it says "Script Disabled" and even when I preview the site there it does not work. Any suggestions?

 

Let share you site url

On 12/30/2020 at 10:23 AM, tazmeah said:

How about this? I have it set to animate for 2 seconds, but you can change that.

<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>

 

Screen Recording 2020-12-30 at 5.21.10 AM.mov

This isn't working for me. I've tried it as code injection in header and footer and also as Code Block. Is there something I'm missing?

Url: https://soybean-semicircle-83mn.squarespace.com/

Password: aber

@iamdanielyoung

Did you change the block id from #block-yui_3_17_2_1_1608660323376_12967 to the one on your page?

I'm really struggling with this also. Usually fine with most edits and aligning blocks into code, but can't make this work at present. 

I've dumped some test numbers at the bottom of this page and replaced their block-yui with my id - and I've deleted the extra block (ongoing projects) as I only needed 2 numbers, but nothing. 

I've tried in both the page header (where it's sat now) and a code block. Also a little confused by "if using code injection remove first and last line"

Any help appreciated. 

Page - https://www.farmgateruralmarketing.co.uk/case-studies

On 5/20/2021 at 4:44 PM, FarmGateMarketing said:

I'm really struggling with this also. Usually fine with most edits and aligning blocks into code, but can't make this work at present. 

I've dumped some test numbers at the bottom of this page and replaced their block-yui with my id - and I've deleted the extra block (ongoing projects) as I only needed 2 numbers, but nothing. 

I've tried in both the page header (where it's sat now) and a code block. Also a little confused by "if using code injection remove first and last line"

Any help appreciated. 

 

Page - https://www.farmgateruralmarketing.co.uk/case-studies

Hi. It looks like you solved this?

Hi @tuanphan, I put the numbers in but haven't them animated still. Any input from your expert eyes appreciated!

Could one reason be, my page isn't homepage? just throwing ideas out there

@tazmeah or @hawaiiestatetours , could you walk me through how to insert this into my website? I have tried to insert in code blogs as well as header injections. Any help would be greatly appreciated. Thanks a-bunch! 

On 5/22/2021 at 4:03 AM, FarmGateMarketing said:

Hi @tuanphan, I put the numbers in but haven't them animated still. Any input from your expert eyes appreciated!

Could one reason be, my page isn't homepage? just throwing ideas out there

 

Hi. Count on page load or on scroll?

Scroll would be preferable, but open to either.

Edit - thanks for digging this up and looking into 🙂

@hawaiiestatetours,@FarmGateMarketing & @Patterson-Has anyone implemented this that can help me? I tried injecting @tazmeah's code into the Header injection, Footer injection, and as CSS with no luck. I changed the block id #s and the names (ie projects, clients) to match my site with no luck. I'm no expert coder so spelling this out for me with exactly what steps I need to take would be great. 

I am looking to have the counter run upon scroll (just like in @tazmeah's video). 

I am looking to do this under the Fun Facts About Me on the About Me page.

https://beeline-consulting.squarespace.com/about

pw: helpmeplease

Any advice would be greatly appreciated. Thanks!

On 12/30/2020 at 10:23 AM, tazmeah said:

How about this? I have it set to animate for 2 seconds, but you can change that.

<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>

 

Screen Recording 2020-12-30 at 5.21.10 AM.mov

Needs much more clarity

On 8/31/2021 at 4:02 AM, Beeline said:

@hawaiiestatetours,@FarmGateMarketing & @Patterson-Has anyone implemented this that can help me? I tried injecting @tazmeah's code into the Header injection, Footer injection, and as CSS with no luck. I changed the block id #s and the names (ie projects, clients) to match my site with no luck. I'm no expert coder so spelling this out for me with exactly what steps I need to take would be great. 

 

I am looking to have the counter run upon scroll (just like in @tazmeah's video). 

I am looking to do this under the Fun Facts About Me on the About Me page.

https://beeline-consulting.squarespace.com/about

pw: helpmeplease

 

Any advice would be greatly appreciated. Thanks!

@Beeline I used a plugin from ghost plugins.

@creedon 

Do you also need to change the other block IDs in the function?

Instead of the block ID query, is it possible to just hardcode the number that you want to count to?