タブ付きメニューでGSAPアニメーションが機能しない

Question

GSAPを使用して、対応するボタンによってトリガーされた要素をアニメーション化しようとしました。アニメーション自体は機能しますが、対応する要素を明らかにするのではなく、すべてを明らかにします。私はあなたがTweenMaxでそれを行うことができ、TimelineMaxを使用する必要はありませんworking codepen here

var trigger = ".trigger"; 
var recipient = ".target"; 
var animation = new TimelineMax({reversed:true, paused:true}); 



$(trigger).click(function(e) { 
    e.stopPropagation(); 
    recipient = '#' + $(this).attr('data-target-id'); 
    if($(trigger).hasClass("active")){ 
    $(trigger).not(this).removeClass("active"); 
    } 

    if($(".target").hasClass("open")){ 
    $not_recipient = $(".target").not(recipient); 
    $(".target").not(recipient).removeClass("open"); 
    } 

    $(this).toggleClass("active"); 
    $(recipient).toggleClass("open"); 

    animation.fromTo(recipient, .3, {display:'none', y:'-100%', autoAlpha:0},{display:'block',y:'0%', autoAlpha:1, ease:Power1.easeOut}); 
    animation.reversed() ? animation.play() : animation.reverse(); 
}); 

Answer 1

を添付しました。

更新JS

var trigger = ".trigger"; 
var recipient = ".target"; 
var animation; 


$(trigger).click(function(e) { 
    e.stopPropagation(); 
    if(! $(this).hasClass('active')){ 
     var parentElm = $(this).parent(); 
     var targetChild = parentElm.find(recipient); 

     $(trigger).removeClass('active'); 
     $(recipient).removeClass('open'); 

     $(this).addClass('active'); 
     targetChild.addClass('open'); 

     if(animation){ 
      animation.reverse(); 
     } 
     animation = TweenMax.fromTo(targetChild, .3, {display:'none', y:'-100%', autoAlpha:0},{display:'block',y:'0%', autoAlpha:1, ease:Power1.easeOut}); 

    } 

}); 

Updated Demo