event with javascript scroll

Question

I have the code below creating the fadein and fadeout effect with the Animate.css library in a scroll event, but when the event occurs applying fadeOut, it reappears until it moves the scroll, and the other error is that while the scroll is less than 28, it keeps doing and repeating the Fadein effect, and I want fadein to occur only if Fadeout has already been done!

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

There are errors in your code:

first - I don’t know where you got this link to the library, but here it didn’t work. I used this other here.

2nd - You have to load them first CSS then the JS, the order in your code is reversed.

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);
   }
   else 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>