I'm trying to get the following number counter to start only once scrolled to and then have it loop after 10 seconds, could anyone please assist me
const counterAnim = (qSelector, start = 0, end, duration = 8000) => {
const target = document.querySelector(qSelector);
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
target.innerText = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};
//#endregion - end of - number counter animation
document.addEventListener("DOMContentLoaded", () => {
counterAnim("#count1", 0, 10000,8000);
counterAnim("#count2", 0, 40, 8000);
counterAnim("#count3", 0, 5, 8000);
});<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count1" class="display-4"></span>+ </h2>
<p class="subtitle">lorem ipsum</p>
</div>
<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count2" class="display-4"></span>+ YEARS</h2>
<p class="subtitle">lorem ipsum</p>
</div>
<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count3" class="display-4"></span> YEAR</h2>
<p class="subtitle">lorem ipsum</p>
</div>You already have most of the setup, you just need to attach your first counterAnim calls to a scroll listener and then also start a timeout to reset startTimestamp to null after 10 seconds
let startTimestamp = null;
const counterAnim = (qSelector, start = 0, end, duration = 8000) => {
const target = document.querySelector(qSelector);
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
target.innerText = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
// reset to the start condition. If you want this to happen multiple times, use setInterval
setTimeout(() => {
startTimestamp = null;
}, 10000);
window.requestAnimationFrame(step);
};
document.addEventListener("scroll", () => {
counterAnim("#count1", 0, 10000,8000);
counterAnim("#count2", 0, 40, 8000);
counterAnim("#count3", 0, 5, 8000);
}