Обмен классами не очищает предыдущие значения анимации

Question

Я работаю над какой-то анимацией, поэтому я подготовил демо, которое точно соответствует задаче. Я меняю классы после завершения первой временной шкалы и запускаю другую временную шкалу, когда пользователь нажимает второй раз. Проблема заключается в том, что при воспроизведении второй временной шкалы анимация добавляет предыдущие значения анимации к элементу, который я анимирую при втором щелчке. Если вы посмотрите на приведенный ниже пример, при запуске второй временной шкалы, т.е. home_slide_2, элемент block_1 принимает значение x из предыдущей анимации движения, анимируя значения x и y. Может ли кто-нибудь наставить меня на то, что я здесь делаю неправильно.

$('.arrow').on("click",function() {
  
  var id = $(this).data('id');
    if(id == "slide_1"){

      // transition of first slide
      var home_slide_1 = new TimelineMax({paused:(true),onComplete:reset})
      .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut},"s")
      .to(".block_2", 1.5, {x: 30,ease:Power4.easeOut},"s");

      function reset(){
        $(".block_1").addClass('block_2').removeClass('block_1').removeAttr("style"); 
        $(".av2").addClass('block_1').removeClass('block_2').removeAttr("style"); 
      };       

      home_slide_1.play();  
      $(this).data('id', "slide_2");
    }

  else if(id == "slide_2"){

    // transition of second slide
    var home_slide_2 = new TimelineMax({paused:(true)})
    .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut});
 
    home_slide_2.play();         
  }

});

.arrow{
  float:right;
  width:50px;
  height:50px;
  background:red;
  curspor:pointer
}
.ar1{
  float:right;
  width:50px;
  height:50px;
  background:black;
  curspor:pointer
}

.block_1{
  background:green;
  float:left;
  width:100px;
  height:100px;  
}

.block_2{
  background:blue;
   float:left;
  width:100px;
  height:100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="arrow" data-id="slide_1"></div>


<div class="block_1 av1"></div>
<div class="block_2 av2"></div>

Answer 1

Вы можете использовать clearProps для очистки значений анимации

else if(id == "slide_2"){

   //clearing the tween values in block_1
   TweenMax.set(".block_1", {clearProps:"all"}); 

   // transition of second slide
   var home_slide_2 = new TimelineMax({paused:(true)})
   .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut});

   home_slide_2.play();      
 }