Scroll action in javascript

Question

My project is to make an animation in a logo using a css effect of the Animate.css library, the animation will occur at a certain point in the scroll of the site. I managed to do something, but there are two bugs or errors, which are:

1° - When the "fade/fade" effect is executed, it reappears at the end in animation.

2° - The "Back/Fadein" effect is executed whenever the point is smaller, I need it to be executed only if the Fadeout effect is already done, and so vice versa.

My code:

window.addEventListener('scroll', function(event){ 
			
		var animacao1 = "animated fadeOutUp";
		var animacao2 = "animated fadeInDown";
		var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
			
		if (window.scrollY > 50) {
			$("#cabecalho .logo").addClass(animacao1);
		}
		if (window.scrollY < 50) {
			$("#cabecalho .logo").removeClass(animacao1);
			$("#cabecalho .logo").addClass(animacao2).one(fimanimacao, function(){
				$(this).removeClass(animacao2);
			});
		}
		});

#cabecalho {
			height: 270px;
			width: 100%;
			background-color: rgba(0, 0, 0, .0);
			position: absolute;
			left: 50%;
			top: 180px;
			transform: translate(-50%, -50%);
		}
		#cabecalho .logo {
			height: 37px;
			width: auto;
			position: absolute;
			left: 40%;
			top: 10%
		}
    #altura{
    height: 1400px;
   }

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="cabecalho">
		<img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png">
</div>

<div id="altura"></div>

Answer 1

You can check whether the opacity of the element is 0 or 1 to trigger an animation, preventing one from running into the other.

I also put a check at the end of the animations to check the scroll, because the user can change before finishing the animation, and so, fires an event scroll to adjust the element according to the current scroll.

Would look like this:

$(window).on('scroll', function(){ 

   var opac = $("#cabecalho .logo").css("opacity"); // pego a opacidade para saber se o elemento está visível

   if(opac == 1 || opac == 0){

      var animacao1 = "animated fadeOutUp";
      var animacao2 = "animated fadeInDown";
      var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
      
      if (window.scrollY >= 50 && opac == 1) {
         $("#cabecalho .logo")
         .removeClass(animacao2)
         .addClass(animacao1)
         .one(fimanimacao, function(){
            if(window.scrollY < 50) $(this).trigger("scroll");
         });
      }

      if(window.scrollY < 50 && opac == 0){
         $("#cabecalho .logo")
         .removeClass(animacao1)
         .addClass(animacao2)
         .one(fimanimacao, function(){
            if(window.scrollY > 50) $(this).trigger("scroll");
         });
      }
   }
});

#cabecalho {
height: 270px;
width: 100%;
background-color: rgba(0, 0, 0, .0);
position: absolute;
left: 50%;
top: 180px;
transform: translate(-50%, -50%);
}
#cabecalho .logo {
height: 37px;
width: auto;
position: absolute;
left: 40%;
top: 10%
}
#altura{
height: 1400px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cabecalho">
   <img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png">
</div>

<div id="altura"></div>