Как я могу вложить свою временную шкалу t2 в свою временную шкалу t1?

Question

У меня простая анимация. В конце анимации одна из непрозрачности объектов должна переходить от 100% до 0% и повторять. Однако его работа не работает. Я думаю, мне просто нужно вложить t2 timeline в t1, но все, что я пытаюсь, не работает.

Я очень новичок в JS, поэтому любое предложение было бы замечательным!

Посмотрите на мою Greensock Js

// Banner Animation 
console.clear(); 
var wait = 100; 



var tl = new TimelineMax(); 
var t2 = new TimelineMax({repeat:-1}); 

//drop in animation 
tl 

.from('#hl_E', 1.3, {top: -100, opacity: 0, ease: Power2.easeOut}) 
.from('#hl_D2', 1.3, {top: -100, opacity: 0, ease: Power2.easeOut}, '-=1.1') 
.from('#hl_M', 1.3, {top: -100, opacity: 0, ease: Power2.easeOut}, '-=.9') 

.to('#hl_E', .3, {top: 20, left:-123, ease: Power2.easeOut}) 
.to('#hl_D2', .3, {top: 20, left:-43, ease: Power2.easeOut}, '-=.3') 
.to('#hl_M', .3, {top: 20, left:-43, ease: Power2.easeOut}, '-=.3') 

.from('#hl_D1', .5, {left:-15, opacity: 0, ease: Power2.easeOut}, '-=.2') 
.from('#hl_A', .5, {bottom:-15, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('#hl_O', .5, {top:-15, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('#hl_D3', .5, {left:-15, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('#hl_Z', .5, {right:-15, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('#hl_--', .5, {top:-10, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('#hl_-', .5, {left:-15, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('.logoGlow', 15.8, {opacity: 0, ease: Elastic.easeOut}) 

t2.to('.logoGlow', 1, {opacity: 0, yoyo:true}) 
.to('.logoGlow', 1, {opacity: 100, yoyo:true}); 

Html

<div id="hl_D1" class="heroLogoAssets"> </div> 
<div id="hl_E" class="heroLogoAssets"> </div> 
<div id="hl_A" class="heroLogoAssets"> </div> 
<div id="hl_D2" class="heroLogoAssets"> </div> 
<div id="hl_M" class="heroLogoAssets"> </div> 
<div id="hl_O" class="heroLogoAssets"> </div> 
<div id="hl_D3" class="heroLogoAssets"> </div> 
<div id="hl_Z" class="heroLogoAssets"> </div> 
<div id="hl_-" class="heroLogoAssets"> </div> 
<div id="hl_--" class="heroLogoAssets"> </div> 
</div> <!-- END heroLogo-Wrap --> 
<div class="logoGlow"><img src="img/enterLogobg.png" width="777" height="189" alt=""/></div> 
<div id="heroLinks-Wrap"> 

Answer 1

Я создал небольшой CodePen для вас.

Поскольку вы хотите целом Timeline t2 к repeat и yoyo вы можете определить, что в constructor:

var t2 = new TimelineMax({repeat:-1, yoyo:true}); 

Тогда вы можете просто добавить Timeline t2 к t1. t2 будет прилагается до t1 и начинает выполнение, когда оригиналt1 отделки.

t1.add(t2); 

(я говорю оригинальный, потому что t1 теперь содержит t2)

EDIT:

Если вы хотите какое-то время, чтобы пройти между конца от оригинальногоt1 и начало от t2 вы могли бы изменить position из t2 при добавлении его к t1:

t1.add(t2, '+=5'); 

Теперь t2 начнется через 5 секунд после того, как оригинальныхt1 концов.