Анимация GSAP не работает в меню с вкладками

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

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

jquery gsap
person Modermo    schedule 20.05.2016    source источник
comment
примерно так: codepen?   -  person Tahir Ahmed    schedule 20.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вам не нужно использовать TimelineMax, вы можете сделать это с помощью TweenMax.

Обновлен 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});

    }

});

Обновленная демонстрация

person Shishir Morshed    schedule 20.05.2016
comment
Базовая функциональность есть, да, но причина, по которой существует класс щелчка для переключения, заключается в том, что если пользователь снова нажимает триггер, элемент переворачивается. Кроме того, html был очень строго организован таким образом по структурным причинам — ваш codepen переместил некоторые элементы. - person Modermo; 23.05.2016
comment
ОП использовал TimelineMax, поэтому ему не приходилось создавать новую анимацию при каждом щелчке. В GSAP лучше создавать временную шкалу вне ваших обработчиков событий. А потом просто play() и reverse() анимацию. Таким образом, вы не создаете ненужные новые анимации движения при каждом щелчке, что может помочь с производительностью и сборкой мусора. :) - person Jonathan Marzullo; 26.05.2016