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.
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
hawaiiestatetours got a reaction from tazmeah in Adding simple animated numbers that count up to website
