GreenSock TimelineMax commençant tôt

Question

J'ai essayé d'obtenir l'animation pour déclencher sur le clic, j'ai créé l'animation via TimelineMax. Je ne vois pas pourquoi, mais il continue à tirer la première instance de cette animation, il y a 5 .blackout-panel et il joue automatiquement l'animation pour le premier .blackout-panel, mais je ne sais pas pourquoi - je veux la pleine animation à contrôler par clic.

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(); 
} 

J'ai créé un codePen pour démontrer: http://codepen.io/Tekkie/pen/XpBOYV/?editors=1010

Toute orientation serait appréciée. De plus, ma fonction killAnimation ne semble pas être virée.

EDIT: 1 - J'ai résolu le problème de mise en pause en mettant un délai. Mon nouveau JS est la suivante:

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(); 
}); 

EDIT: 2 - J'ai résolu tous les problèmes à l'aide de la JS suivant:

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); 
    }); 

Answer 1

Essayez de mettre la pause comme ceci:

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

et dans votre fonction:

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