Как сделать так, чтобы при прокрутке вниз или в другую область сайта, animate css исчез?

Добрый день.
Не знаю, как правильно сформулировать вопрос.
Крч есть у меня слайды. На каждом слайде кнопка, на которую нажимаешь и выскакивает текст с анимацией. Использую animate css. И возникла такая проблема. Когда перехожу на другой слайд и потом обратно на слайд с анимацией, окно не пропадает. То есть оно так и висит. А надо чтобы при переходу куда то, анимация как бы возвращалась обратно.

<div class="slide section_content s1_1">
            <div id = "click" onclick = "FuncImages()"><a href="#"><h2 class="link has-text-white">СЛАЙД 1</h2></a></div>
            <div id="main" class="animated flipInY">
            	<p>
            	текст
               </p>
            </div>
		</div>

#main {
    display: none;
  	width: 700px;
	height: 500px;
	background: #000;
	border-radius: 10%;
}

#main p {
	color: #fff;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
	padding-bottom: 40px;
}

#click:hover {
  cursor: pointer;
}
	
.animated {
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  animation-duration: 200ms;
}

$('#click').click(function(){ 

	$('#main').show(); 
	$('#click').hide(); 

});
	
$('#main').click(function() {
    $('section').addClass('animated flipInY');
    exit();
});

Можно ли это решить на js? Я пока в нем плохо шарю.
Заранее спасибо!