slick + анимация wow js

$('.slider').on('init', function(e, slick) { 
  var $firstEl = $('.slider_item:first-child').find('[data-animation]'); 
  doAnimation($firstEl);     
}); 
$('.slider').on('beforeChange', function(e, slick, currentSlide, nextSlide) { 
  var $animationEl = $('.slider_item[data-slick-index="' + nextSlide + '"]').find('[data-animation]'); 
  doAnimation($animationEl);     
}); 
 
$('.slider').slick({ 
  infinite: false, 
  arrows: false, 
}); 
 
 
$('.slider').mousewheel(function (e) { 
  if (e.deltaY !== 1) { 
    $('.slider').slick('slickNext'); 
  } else { 
    $('.slider').slick('slickPrev'); 
  } 
 
  e.preventDefault(); 
}); 
 
 
function doAnimation(elements) { 
  var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
  elements.each(function() { 
    var $this = $(this); 
    var $animationDelay = $this.data('delay'); 
    var $animationType = 'animated ' + $this.data('animation'); 
    $this.css({ 
      'animation-delay': $animationDelay, 
      '-webkit-animation-delay': $animationDelay 
    }); 
    $this.addClass($animationType).one(animationEndEvents, function() { 
      $this.removeClass($animationType); 
    }); 
  }); 
} 
 
// new WOW({ 
//   offset: 100  
// }).init();

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
 
  width: 100%; 
  height: 100%; 
} 
 
.slider, 
.slick-list, 
.slick-track, 
.slider__item { 
  width: 100%; 
    height: 100vh; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css" /> 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" ></script> 
 
<section class="slider"> 
 
  <article class="slider_item"> 
    <div class="header"> 
      <div class="wraper"> 
        <div class="logo"> 
          <img src="img/logo.png" alt="logo"> 
          <h1>SM-Marketing</h1> 
        </div> 
        <div class="first-page"> 
          <div class="method"> 
            <h2>Методика №1</h2> 
            <p class="title-p" >по скоростному получению клиентов из интернета</p> 
            <p class="method-p">или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p> 
          </div> 
          <div class="block-jq"> 
            <div class="block-jq-item" data-animation="bounceInDown" data-delay="0.3s"><div>как найти новых клиентов</div></div> 
            <div class="block-jq-item" data-animation="bounceInRight" data-delay="0.3s"><div>как получать больше заявок</div></div> 
            <div class="block-jq-item" data-animation="bounceInUp" data-delay="0.3s"><div>как построить систему лидогенерации</div></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </article> 
 
  <article class="slider_item"> 
    <div class="facts"> 
      <div class="wraper wrap100"> 
        <div class="facts-item"> 
          <h2>Факт №1</h2> 
          <div class="facts-item-hint" data-animation="bounceInDown" data-delay="0.3s">Заявки  это сырьё для продаж <br> 
            Не будет заявок – не будет и продаж</div> 
        </div> 
        <div class="facts-item"> 
          <h2>Факт №2</h2> 
          <div class="facts-item-hint" data-animation="bounceInDown" data-delay="0.3s">Прямо сейчас ваши конкуренты используют маркетинговые <br> 
            инструментыи поэтому у них всё впорядке с клиентами </div> 
        </div> 
      </div> 
    </div> 
  </article> 
</section>