Adding simple animated numbers that count up to website

7 hours ago, ChillOutBar said:

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

Yes. Block ids are unique and so ones from one site won't work on another.

If you want to add thousand separators to your number here is some code.

After the following line...

            if (isInViewport(spacerBar) && !window.numbersAnimated) {

...add the following code...

                function addThousandsSeparator (n) {
                    // by Thomas Creedon < http://www.tomsWeb.consulting/ >
                    n = String(n);
                    n = n.replace ( /\d(?=(?:\d{3})+(?!\d))/g, '$&,' );
                    return n;
                }

The thousand separators code is cribbed from Store Price Change.

Then for any lines like the following.

                    funds.textContent = Math.floor(curfunds);
                    funds.textContent = fundsNum;

Change them to the following.

                    funds.textContent = addThousandsSeparator(Math.floor(curfunds));
                    funds.textContent = addThousandsSeparator(fundsNum);

Let us know how it goes.

Hi everyone
I hope you don't mind me jumping on this thread but the person who was helping me is too busy to reply to this message, so I just wondered if there were any kind amazing code wizards that could look at this for me?
Thanking you in advance
Smiles
Jo

---------

I'd like someone to check this code for animated numbers on my home page (website yet to go live).

I've updated the blockID to the relevant block on my website.

Presumably I add this code to the Custom CSS in Design or do I add it to the header or footer in Advanced/Code Injection?

-------

<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_1671553979790_1864517").length;
    },

    function () {
        // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517");
        var spacerBar = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517");
        // save first number
        var projects = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517 h1");
        var projectsNum = +projects.textContent;
        // save second number
        var clients = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517 h1");
        var clientsNum = +clients.textContent;
        // save third number
        var ongoing = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517 h1");
        var ongoingNum = +ongoing.textContent;
        
        // set all numbers to zero
        projects.textContent = clients.textContent = ongoing.textContent = 0;
 
        function animateNumbers() {
            if (isInViewport(spacerBar) && !window.numbersAnimated) {
function addThousandsSeparator (n) {
                    // by Thomas Creedon < http://www.tomsWeb.consulting/ >
                    n = String(n);
                    n = n.replace ( /\d(?=(?:\d{3})+(?!\d))/g, '$&,' );
                    return n;
                }
                // 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
                    funds.textContent = addThousandsSeparator(Math.floor(curfunds));
                    funds.textContent = addThousandsSeparator(fundsNum);

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

Also. and hopefully this is just a small query - when I attempted to add this to Custom CSS in Design (just playing around while I wait for a reply) it says it is "missing opening }" - where should that go?
Thanks in advance!
Smiles

Jo

10 hours ago, curlybirdie21 said:

when I attempted to add this to Custom CSS in Design (just playing around while I wait for a reply) it says it is "missing opening }" - where should that go?

The code you have is JavaScript. JavaScript does not go in Design > Custom CSS.

Add the code to Page Settings > Advanced > Page Header Code Injection for the home page. Please see per-page code injection.

Let us know how it goes.

Thanks for the advice, although the numbers are staying static - this is the view from the page and the numbers I am trying to get to animate. Maybe I need to adjust the code somewhere, I am not sure.

11 hours ago, curlybirdie21 said:

this is the view from the page and the numbers I am trying to get to animate

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

On 12/30/2020 at 6:23 PM, 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

Thanks @tazmeah for sending this code over.

I tested it and change the Block ID, however, the numbers are "400+" and "11K". So because of the + and K after the number, the code is not working.

I also was hoping to keep the custom colour #ED8561 and also the bold front.

Is anyone could help me please?

https://www.creativeportrait.net.au/