Ciao a tutti, ho un problema con una gallery swiper che non riesco a risolvere.

Questo è il codice completo (esemplificativo) che potete testare:

codice:
<div class="swiper-container">  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(http://XXX.jpg)">
      <div class="slide-text">
        <div class="text1">Prima</div>
        <div class="text2">Sottotitolo prima</div>
      </div>
    </div>
<div class="swiper-slide" style="background-image: url(http://YYY.jpg)">
      <div class="slide-text">
        <div class="text3">Seconda</div>
        <div class="text4">Sottotitolo Seconda</div>
      </div>
</div>
  </div>
</div>


<style>


.swiper-slide {
background-size: cover;
background-repeat: no-repeat;
background-position:  50% 40%;
width: 100%;
}


.swiper-container {
width: 100%;
height: 500px;  
position: absolute; top: 0px; z-index: 2; margin: 0 auto;
}


.slide-text {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}


.text1 {
font-size: 70px;
font-weight: 550;
color: #fff;
opacity: 0;
animation: slide-up-fade-in 1s ease 1s forwards;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
bottom: 115px;
}


.text2 {
font-size: 60px;
font-weight: normal;
color: #fff;
font-family: windsong;
opacity: 0;
animation: fade-in 1s ease 2s forwards;
margin-top: 240px;
}	


.text3 {
font-size: 70px;
font-weight: 550;
color: #fff;
opacity: 0;
animation: slide-up-fade-in 1s ease 1s forwards;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
bottom: 115px;
}


.text4 {
font-size: 60px;
font-weight: normal;
color: #fff;
font-family: windsong;
opacity: 0;
animation: fade-in 1s ease 2s forwards;
margin-top: 240px;
}



@keyframes slide-up-fade-in {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}


@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




</style>


<script>


var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 7000,
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },

on: {
  slideChangeTransitionEnd: function() {
    var activeIndex = this.activeIndex;
    var text1 = activeIndex === 0 ? '.text1' : '.text3';
    var text2 = activeIndex === 0 ? '.text2' : '.text4';
    var text3 = activeIndex === 0 ? '.text3' : '.text1';
    var text4 = activeIndex === 0 ? '.text4' : '.text2';


    TweenMax.fromTo(text1, 1, { y: '50px', opacity: 0 }, { y: '0px', opacity: 1 });
    TweenMax.fromTo(text2, 1, { opacity: 0 }, { opacity: 1, delay: 1 });
    TweenMax.fromTo(text3, 1, { y: '50px', opacity: 0 }, { y: '0px', opacity: 1 });
    TweenMax.fromTo(text4, 1, { opacity: 0 }, { opacity: 1, delay: 1 });
  }
}
});


</script>
Il problema che si verifica è questo: gli effetti animati con cui appare il testo funziona correttamente solo nella prima slide, ma non nella seconda, dove il testo compare subito staticamente.

Dal secondo loop in poi invece funziona anche la seconda slide.

Potete aiutarmi a risolvere?

Grazie!