Повторение временной шкалы TweenMax с перекрытием - PullRequest
Новая
       24

Повторение временной шкалы TweenMax с перекрытием

0 голосов
/ 22 мая 2019

Я пытаюсь сделать так, чтобы несколько элементов исчезли друг на друге на временной шкале, повторяющейся 10 раз.

Проблема, с которой я сталкиваюсь, заключается в том, чтобы анимация перекрывалась, когда временная шкала заканчивается и начинается новая. В демонстрации Codepen, как я могу убедиться, что анимация перекрывается, чтобы белый фон никогда не был виден, когда квадрат меняет цвет?

Спасибо. 

var t2_blue 	= $("#t2_blue");
var t2_yellow = $("#t2_yellow");
var t2_pink 	= $("#t2_pink");		
var animateTextFade = new TimelineMax({repeat: -1});
animateTextFade
    .to(t2_pink, 0.5, {alpha: 1}, "-=0.3")
    .to(t2_pink, 0.5, {alpha: 0}, "+=0")
    .to(t2_yellow, 0.5, {alpha: 1}, "-=0.3")
    .to(t2_yellow, 0.5, {alpha: 0}, "+=0")
    .to(t2_blue, 0.5, {alpha: 1}, "-=0.3")
    .to(t2_blue, 0.5, {alpha: 0}, "+=0")
  ;
.img{
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}	
#t2_blue, #t2_yellow, #t2_pink {
  width: 200px;
  height: 200px;
}
#t2_blue {
  background: blue;
}

#t2_yellow {
  background: yellow;
}

#t2_pink {
  background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="img" id="t2_blue" ></div>
<div class="img" id="t2_yellow" ></div>
<div class="img" id="t2_pink" ></div>
...