Counter up animation | Javascript

[@natan-cwb9131]

Muito bão Robson!!! Pelo sotaque vc é dos nosso...UHAuHAhAU!!!

[@DevMadeEasy]

Obrigado amigo! Bem vindo a nossa comunidade & happy coding!

[@djordjek3916]

Really well-explained video. Easy. Thank you for the tutorial!

[@DevMadeEasy]

Glad you enjoyed it!

[@DevMadeEasy]

If you find this video helpful, give it a like as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏 👉 Source Code Available Here: 🌱devmadeeasy.gumroad.com/l/counterupanimation

[@foxynight1688]

Thank you for the tutorial!

[@DevMadeEasy]

Glad it was helpful!

[@samarpal7088]

Very nice class sir thanks

[@DevMadeEasy]

All the best

[@abdurahman6838]

Barakallah bro

[@DevMadeEasy]

Thanks! Happy Coding my friend!

[@jalalbmnf]

Great job!!!👍👍👍

[@DevMadeEasy]

Thank you! Cheers!

[@NganNguyen-ww1ez]

Thank you very much

[@DevMadeEasy]

Any time

[@ceejayviii]

Thank You!

[@DevMadeEasy]

You're welcome! I'm very glad you liked it my friend! Welcome to the Community and Happy Coding!

[@ankitchauhan8682]

great thanks

[@DevMadeEasy]

Welcome 😊

[@RyanCavalcanti]

Obrigado! Poderia me tirar uma dúvida? Gostaria de saber como faço para só executar a função desse contador quando o usuário descer até a posição da tela do site onde se encontra a função. Porque assim que o usuário entra, a função já é ativada e ele não consegue visualizar essa função sendo executada.

[@flamengoreactskill]

great job

[@DevMadeEasy]

Hey DEV, I'm glad you liked it, welcome to the Tribe...

[@WilliamSeeley-ho6ju]

Would this work on a web extension?

[@camilogarcia1325]

If + does not works for you to convert to number the string, use parseInt(counter.innerText); instead

[@DevMadeEasy]

Thanks for you feedback Camigo. Welcome to our DEV Tribe....

[@camilogarcia1325]

@@DevMadeEasy THanks to you to make this tutorials, hope you upload more, is awesome

[@mobilehospitalpg3608]

great

[@DevMadeEasy]

Hello DEV, I'm glad you like it... There is more coming this week... Happy Coding!!!

[@tee_blaqk]

Hello, thank you sir 💯💯👌 Please what if I want to add one to the value to make it ..1501, every time it counts up, so it'll be 1501, 1502... Would appreciate a response, asap, thank you

[@DevMadeEasy]

Yes, you can

[@PrefnaVagheni]

Thank you for this amazing tutorial. Surely I learned something today. Please I got a question though, why to choose 250 as dividend? someone please to help me understand that logic. Cause it was the only way(number) to get the exact number in the data-target. So I'll appreciate if someone can break the logic down for me. Thanks.

[@DevMadeEasy]

Hello Dev, I am glad you liked... Welcome to the DevTribe...

[@professionalman9449]

tanks ❤

[@DevMadeEasy]

You're welcome 😊

[@user713.]

how to make the animation activate when scrolling to the block?

[@DevMadeEasy]

Yes, this is a great idea, I was going to do it, but the video would be too long.. Feel free to do so if you want you can show us the results here in the comments. Anyway, good studies!

[@yuvantbesre1297]

@@DevMadeEasy He is not telling you anything. He is actually asking you that how would we animate on scroll. As a matter of fact, I do too. I don't want to use JQuery or any other plugin for such a small thing. SO please tell us.

[@djordjek3916]

@@yuvantbesre1297 I did it using vanilla JavaScript intersection observer. Here is the code for simple example: *HTML* Hello All 1500 KZbin followers 3000 Twitter followers 1000 Facebook followers *CSS* * { margin: 0; padding: 0; box-sizing: border-box; } .sc-1 { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: orange; } .sc-2 { min-height: 40vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: center; padding:30px; } .counter-container { text-align: center; background-color: white; padding: 20px; box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.3); } i { font-size: 40px; } .fa-youtube { color: #FF0D00; } .fa-twitter { color: #1EA1F2; } .fa-facebook-f { color: #1877F2; } .counter { font-size: 50px; margin: 30px 0; } @media (max-width: 650px) { .sc-2 { grid-template-columns: 1fr; } } *JavaScript* const counters = document.querySelectorAll('.counter'); const section2 = document.querySelector('.sc-2'); const countingCounters = function (entries, observer) { entries.forEach(entry => { if (entry.isIntersecting && entry.intersectionRatio >= 0.2) { counters.forEach(counter => { counter.innerText = '0'; const updateCounter = function () { const target = +counter.getAttribute('data-target'); const c = +counter.innerText; const increment = target / 350; if (c < target) { counter.innerText = `${Math.ceil(c + increment)}`; setTimeout(updateCounter, 5); } else { counter.innerText = target; } } updateCounter(); }); observer.unobserve(section2); } }); }; const options = { root: null, threshold: 0.2 }; const observer = new IntersectionObserver(countingCounters, options); observer.observe(section2);

[@lovelymuffins21]

@@djordjek3916 thank you very much

[@sviatoslavoleksiienko8523]

Have the same question :)

[@typicalyorkshirebloke]

Is it possible to have the numbers going up at different speeds inside of one set of code instead of repeating the exact same code over multiple times with different speeds?

[@marcin1352]

in div add data-speed="500" (500 is example) then add to script const speed = +counter.getAttribute("data-speed"); and update const increment value to target / speed;

[@gmkhussain]

Great Man ❤️🔥 What a co-incidence on my channel #NewSeries 😂

[@DevMadeEasy]

I'm glad you like it!