GreenSock TimelineMax早點開始

我一直試圖讓動畫點擊開火，我已經通過TimelineMax創建了動畫。我看不出爲什麼，但它始終觸發此動畫的第一個實例，有5個.blackout面板，它會自動爲第一個.blackout面板播放動畫，但我不知道爲什麼 - 我想要全部通過點擊來控制動畫。GreenSock TimelineMax早點開始

var showBarsTL = new TimelineMax({ paused: true, onComplete: killAnimation }); 

$('.portfolio-panel').on("click", function() { 
    showBarsTL.play() 
}); 

showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0)); 
showBarsTL.add (TweenMax.from(".blackout-panel", 0, {css:{top:"auto", bottom:"0"}})); 
showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275)); 

function killAnimation() { 
    showBarsTL.clear(); 
}

我創建了一個codePen來證明這一點：http://codepen.io/Tekkie/pen/XpBOYV/?editors=1010

任何指導，將不勝感激。另外我的killAnimation函數似乎沒有被解僱。

編輯：1 - 我通過延遲解決了暫停問題。我的新JS如下：

var $blackoutPanels = $('.blackout-panel'); 
var showBarsTL = new TimelineMax({ paused: true }); 

showBarsTL 
.add (TweenMax.staggerTo($blackoutPanels, **0.1275**, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0)) 
.add (TweenMax.from($blackoutPanels, 0, {css:{top:"auto", bottom:"0"}})) 
.add (TweenMax.staggerTo($blackoutPanels, 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275)); 

$('.portfolio-panel').on("click", function() { 
    showBarsTL.play(); 
});

編輯：2 - 我已經解決了使用以下JS的所有問題：

var $blackoutPanels = $('.blackout-panel'); 
    var showBarsTL = new TimelineMax({ 
     paused: true 
    }); 

    showBarsTL 
     .add(TweenMax.staggerFrom($blackoutPanels, 0, { 
      yPercent: -100, 
      top: -100 + "%", 
      onStartParams: ["{self}"], 
      ease: Power0.easeInOut 
     }, 0, 0)) 
     .add(TweenMax.staggerTo($blackoutPanels, 0.3, { 
      yPercent: 0, 
      top: 0, 
      onStartParams: ["{self}"], 
      ease: Power1.easeInOut 
     }, 0.125, 0)) 
     .add(TweenMax.to($blackoutPanels, 3, { 
      yPercent: +100, 
      top: +100 + "%", 
      onStartParams: ["{self}"], 
      delay: 0.3, 
      ease: SlowMo.ease.config(0.4, 1, false) 
     }, 0.3, 0)) 
     .add(TweenMax.to($blackoutPanels, 0, { 
      yPercent: -100, 
      top: -100 + "%", 
      delay: 0.375 
     })); 

    $('.portfolio-panel').on("click", function() { 
     showBarsTL.restart(false, false); 
    });

來源

2017-02-08 SirBartlesbyThe3rd

嘗試設置這樣的停頓：

var showBarsTL = new TimelineMax({onComplete: killAnimation }).paused(true);

在你的函數：

$('.portfolio-panel').on("click", function() { 
showBarsTL.paused(false); 
});

來源

2017-02-08 13:28:26 gianni

我已經做了修正，但可悲的是沒有成功，看到這裏：http://codepen.io/Tekkie/pen/QdVZQb?editors=0010謝謝你。 – SirBartlesbyThe3rd

好的，我上傳了一個示例文件，您可以在其中看到如何手動啓動時間線，以及如何從另一個文件開始完成： http://codepen.io/giannidk/pen/apaRXY?editors= 0010 – gianni

完美謝謝 - 我已經差不多完成了我要做的事！這是我的筆目前的狀態：http://codepen.io/Tekkie/pen/ff2e0d2473921c29a8adfe9ac6d7a17e/ 現在我只需要能夠重置動畫完成後的一切，所以我可以重複一遍又一遍的動畫點擊。 – SirBartlesbyThe3rd

GreenSock TimelineMax早點開始

回答

相關問題