Number Counting Animation | Counter Up Animation | HTML CSS & JavaScript

we'll learn how to add number counting animation for your website using HTML, CSS & JavaScript. You can add this counter up animation to represent your number of clients, posts, projects and so on.

Subscribe my channel for more helpful videos:

Write Code Faster With Emmet

This 🎬 video is part of Playlist:

📎 Source Code:

🌎 Browser : Brave V.1.40 (Chrome V.103.0)
📝 Code Editor : VS Code
💠 Extensions : Live-server

#numbercounting #javascriptprojects

[CodingDesign]

If you want to ➕ add this animation while "SCROLLING" then
Modify these codes:

In 📝Index.html file
➕ add <section> tag ⏏JUST ABOVE the <div class="container">.

In 📝style.css file
➕ add
section {
min-height: 100vh;
background: linear-gradient(45deg, purple, blue);
}

Inside 📝<script> tag of index.html file
❌ remove const counting = setInterval(updateCounting, 1);
➕ add this code "⏏Just Above" the "UpdateCounting()" function

let counting;

let countingObserver = new IntersectionObserver((entries, observer)=>{
let [entry] = entries;
if(entry.isIntersecting){
counting = setInterval(updateCounting, 1);
}else {
return;
}
},
{
root: null,
threshold: 0.8
});

[anukash]

This exactly what I was looking for. Thank you🙏

[JunaidKhan-ijtj]

THANK YOU SOO MUCH YOU HAVE SOLVED MY PROBLEM WITHIN 15 MINUTES
THANKS AGAIN🥰🥰🥰🥰🥰🥰🥰

[itspawanpoudel]

You should make the animation happen when you react at some position of page
Like about section in single page web app