Javascript counter on animation end

Question

how can I make a counter that counts every time animation restarts? I tried seconds counter, but it didnt synchronize well with my animation. However, I am trying to make similar website as tacospin.com, but with jumping dog. The logic in tacospin is quite simple, everytime degree = 0 it counts. But I cant figure out how to do something like that My animation code:

var seconds = 0; var el = document.getElementById('seconds-counter'); function incrementSeconds() { seconds += 1; el.innerText = "You have been here for " + seconds + " seconds."; } var cancel = setInterval(incrementSeconds, 1350);

#center{ display: block; margin-left: auto; margin-right: auto; width: 20%; } .centerfloor{ display: block; margin-left: auto; margin-right: auto; margin-top: 193px; width: 30%; } @keyframes jump { 0% {transform: translate3d(0,0,0) scale3d(1,1,1);} 40% {transform: translate3d(0,30%,0) scale3d(1,1,1);} 100% {transform: translate3d(0,100%,0) scale3d(1,1.2,1);} } .jump { transform-origin: 50% 50%; animation: jump .7s linear alternate infinite; } /* For demo: */

<!DOCTYPE html> <html lang="cz"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dog jump</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div id="dogdiv"> <img class="jump" id="center" src="dogie.png" alt="idk"> </div> <img class="centerfloor" src="floo.png"> </main> <div id="seconds-counter"></div> <script src="script.js"></script> </body> </html>

GrafiCode · Accepted Answer · 2022-09-24 11:25:18Z

You can rely on animationiteration event, it can be bound to any DOM element which is animated via CSS, and it gets fired everytime the animation repeats.

https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event

var seconds = 0; let animations = 0; let animFlag = false; var el = document.getElementById('seconds-counter'); const el2 = document.getElementById('anims-counter'); function incrementSeconds() { seconds += 1; el.innerText = "You have been here for " + seconds + " seconds."; } var cancel = setInterval(incrementSeconds, 1350); const animated = document.querySelector('.jump'); animated.addEventListener('animationiteration', () => { animFlag = !animFlag if (!animFlag) { animations++ el2.innerText = "Animation ended. Total: " + animations } });

#center{ display: block; margin-left: auto; margin-right: auto; width: 20%; } .centerfloor{ display: block; margin-left: auto; margin-right: auto; margin-top: 193px; width: 30%; } @keyframes jump { 0% {transform: translate3d(0,0,0) scale3d(1,1,1);} 40% {transform: translate3d(0,30%,0) scale3d(1,1,1);} 100% {transform: translate3d(0,100%,0) scale3d(1,1.2,1);} } .jump { transform-origin: 50% 50%; animation: jump .7s linear alternate infinite; } /* For demo: */

<!DOCTYPE html> <html lang="cz"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dog jump</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div id="dogdiv"> <img class="jump" id="center" src="dogie.png" alt="idk"> </div> <img class="centerfloor" src="floo.png"> </main> <div id="seconds-counter"></div> <div id="anims-counter"></div> <script src="script.js"></script> </body> </html>

Thank you very much, but my code runs on two animations. Animation 1 makes the dog jump to the top, and the seconds puts him down. So the counter is everytime mutliplied by two. However, thank you for your responds ;)
@Simon ok, edited my answer, I added a flag to handle that: now it basically increments animations only half of the time.

Collectives™ on Stack Overflow

Javascript counter on animation end

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related