Javascript counter on animation end

userUNem1 0
Viewed 32

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>

css-animations javascript
1 Answers

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>

GrafiCode0
Related