@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
.png.ae33a3fb857981351d6dffb5c3e954e4.png)
