Swiper.js with Wow.js Animation

Combining the Swiper.js with wow.js animated content

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
  <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
</div>
 
 <div class="my1">
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <div class="animate">
            <div class="text"></div>
                </div>
</div>

 <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
         ...

CSS

html,body{position:relative;height:1000px;}body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}.swiper-container{width:100%;height:100%;}.swiper-slide{background-position:center;background-size:cover;}
.container { margin:40px; padding:40px ; display:block ; background-color: rgba(255,255,255, 0.7);width:300px;  }
.title { font-size:30px;}
.text { font-size:14px; }

JavaScript

$(document).ready(function() {
$('.text').parent().parent().addClass('txt')
 $('.txt *').wrap('<div class="mytxt wow fadeInUp"></div>');
    
    var c = 1;
$('.wow').each(function(idx, elem) {
       $(elem).attr('data-wow-delay', c + 's');
       c += 0.5;
    });
    

    $(function() {
    $('.mytxt')
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
    		$('.mytxt').each(function(){
        	if(scroll > ($(this).offset().top + $(this).height()) || (scroll + $(window).height()) <  $(this).offset().top) {
          	$(this).removeClass('fadeInUp animated').attr('style', 'visibility: hidden');
                 var c = 1;
                  $('.wow').each(function(idx, elem) {
                  $(elem).attr('data-wow-delay', c + 's');
                  c += 0.5;
   	 });
          }else{
          	$(this).addClass('fadeInUp animated').attr('style', 'visibility: visible');
                 var c = 1;
                 $('.wow').each(function(idx, elem) {
                 $(elem).attr('data-wow-delay', c + 's');
                 c + = 0.5;
    });
         
            }
        });
    });
});
  
		var swiper = new Swiper('.swiper-container', {
			pagination: true,  
			effect: 'fade',
			loop: true, 
			autoplay: 7000,
        	autoplayDisableOnInteraction: false,
			onSlideChangeStart: function(s) {  
            var x = s.activeIndex;
 
			}
		});
		
	var wow = new WOW(
	  {
		boxClass:     'wow',      // animated element css class (default is wow)
		animateClass: 'animated', // animation css class (default is animated)
		offset:       0,          // distance to the element when triggering the animation (default is 0)
		mobile:       true,       // trigger animations on mobile devices (default is true)
		live:         true,       // act on asynchronously loaded content (default is true)
		callback:     function(box) {
		  // the callback is fired every time an animation is started
		  // the argument that is passed in is the DOM...