How Do I Make A Function To Check If An Animation Passes A Certain Point

Ok so I know the title is nonsense buT how do i check if the obstacle passes a certain point and active a function because of It? Here is my code so far Btw a snood is the turke

Solution 1:

your code is a real mess. First, do not mix the html code and the css code. Each has its place. and more ... argh!

[edit]
Strangely, this old post seems to arouse new interest ...
As my knowledge in JS has progressed a bit, I decided to refresh this code.

// check for browser correct 'animationend' name
const EndAnimationEvent = (()=>{  // IIFE (Immediately Invoked Function Expression)
  let  el = document.createElement('fakeelement')
   ,   aKeys ={ animation      : 'animationend'       // standard event name
              , OAnimation     : 'oAnimationEnd'      // Opera
              , MozAnimation   : 'animationend'       // Mozilla
              , WebkitAnimation: 'webkitAnimationEnd' // Safari
              , msAnimation    : 'msAnimationEnd'     // MsIE
              };
  for (let k in aKeys) {               // check for
    if (el.style[k] !== undefined) {  // correct propertie
      return aKeys[k];            // browser usage
} } })();

const myTurkey = document.getElementById('the-turkey')
  ,   myButton = document.getElementById('my-button')
  ;
myButton.onclick = ()=>
  {
  myTurkey.classList.add('jump');
  }
myTurkey.addEventListener( EndAnimationEvent, ()=>
  {
  myTurkey.classList.remove('jump');
  });

body { background-color: lightblue; }
* {  margin: 0;  padding: 0; border: 0; }

#the-turkey {
  position: relative;
  width : 160px;
  height: 160px;
  margin: 220px auto 0 auto;
  animation-duration: 1s;
}
#the-turkey.jump {
  animation-name: turkey;
}
#the-turkey > div {
  position: absolute;
  display: block;
}
#corpus  {
  top: 0;
  left :40px;
  width : 65px;
  border-radius: 50%;
  background-color: brown;
  height: 95px;
}
#beak {
  left: 100px;
  top: 20px;
  padding: 1px 1px;
  width: 1px;
  height: 1px;
  border-top: 10px solid transparent;
  border-left: 25px solid #ffc800;
  border-bottom: 5px solid transparent;
}
#eyes {
  width:26px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: 11px;
  left:77px;
}
#pupils {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: black;
  position: relative;
  top: 20px;
  left:86px;
}
#snood {
  width: 11px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top:  33px;
  right:45px;
}
#tail {
  width: 20px;
  height: 150px;
  border-radius: 50%;
  background-color: crimson;
  position: relative;
  top: -55px;
  left: 5px;
  transform: rotate(-30deg);
}
#legRight,
#legLeft {
  width: 3px;
  height: 22px;
  background-color: black;
  position: relative;
  top: 90px;
  transform: rotate(30deg);
}
#legRight { left: 58px; }
#legLeft { left: 68px; }

@keyframes turkey {
  0%   { top: 0px; }
  50%  { top: -200px; }
  100% { top: 0px; }
}
#my-button {
  margin: 10px auto 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
#my-button>h2 {
  text-align: center;
  width: 100%;
  margin-top: 35px;
  cursor: pointer;
}
.obstacle {
  height: 100px;
  width: 10px;
  background-color: black;
  animation: obstacle 3s infinite;
  position: relative;
  top: -250px;
}
@keyframes obstacle {
  from { left: 100%; }
  to   { left: -870px; }
}

<div id="the-turkey">
  <div id="corpus"></div>
  <div id="beak"  ></div>
  <div id="eyes"  ></div>
  <div id="pupils"></div>
  <div id="snood" ></div>
  <div id="tail"  ></div>
  <div id="legRight" ></div>
  <div id="legLeft"  ></div>
</div>

<div id="my-button" >
    <h2>JUMP</h2>
</div>

<div class="obstacle"></div>

Otherwise, here is the JS used before ...

var
  myButton  = document.getElementById('my-button')
  my_Turkey = document.getElementById('the-turkey'),
  DetectAnimationEnding = 'webkitAnimationEnd oAnimationEnd oanimationend msAnimationEnd animationend'.split(' ')
;

DetectAnimationEnding
  .forEach(function( AnimEndEvent  ) {
    my_Turkey.addEventListener( AnimEndEvent, function() {
        my_Turkey.className = "";
    });
});

myButton.onclick = function () {
  my_Turkey.className = "jump";
}