Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding simple animated numbers that count up to website


hawaiiestatetours

Question

  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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.

12 answers to this question

Recommended Posts

  • 1

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>

 

Link to post
  • 0
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. 

Link to post
  • 0
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"?

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...