Skip to content

Instantly share code, notes, and snippets.

@GiuseppeMP
Last active May 17, 2024 22:40
Show Gist options
  • Save GiuseppeMP/fbfbc58fab877e27e2948c6da406296f to your computer and use it in GitHub Desktop.
Save GiuseppeMP/fbfbc58fab877e27e2948c6da406296f to your computer and use it in GitHub Desktop.
$w.onReady(function () {
$w.onReady(()=>{
let viewcounting = 0; //initiate viewportenter count
$w('#text1').onViewportEnter(() => {
viewcounting++; //increment viewport count by 1 on entry
if (viewcounting === 1) { //if statement to check if viewport entry count = 1
let count = 0; //starting number
const endTime = 100; // ending number
const interval = 10; // speed of the count in ms
const counter = setInterval(() => {
$w('#text1').text = String(count); // update text ID to match text element
if (count === endTime) {
clearInterval(counter);
}
count++;
}, interval);
}
});
});
$w.onReady(()=>{
let viewcounting = 0; //initiate viewportenter count
$w('#text2').onViewportEnter(() => {
viewcounting++; //increment viewport count by 1 on entry
if (viewcounting === 1) { //if statement to check if viewport entry count = 1
let count = 0; //starting number
const endTime = 100; // ending number
const interval = 10; // speed of the count in ms
const counter = setInterval(() => {
$w('#text1').text = String(count); // update text ID to match text element
if (count === endTime) {
clearInterval(counter);
}
count++;
}, interval);
}
});
});
});
$w.onReady(function () {
//COUNT ELEMENT
function countElement(element, startValue, endValue, prefix = "", suffix = "") {
const duration = 2000;
const increment = (endValue - startValue) / (duration / 20);
let currentValue = startValue;
const timer = setInterval(() => {
currentValue += increment;
$w(element).text = prefix + `${(Math.round(currentValue)).toLocaleString('en-US')}${suffix}`;
if (currentValue >= endValue) {
clearInterval(timer);
}
}, 20);
}
//COUNT TEXT ANIMATION 🥎
$w("#Counters").onViewportEnter(async () => {
await countElement("#text1", 0, 5, "", "");
await countElement("#text2", 0, 2010, "Member Since: ", "");
await countElement("#text3", 0, 48, "", " +");
await countElement("#text4", 0, 50, "$", " /hr");
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment