GSAP Morphing Plugin Usage

[KDSDeveloper 0 Likes (Newbie)]

Hello,

I'm trying to implement the morphing plugin on an accordion module to morph the "+" to a "-" when the answer is in an open state when clicked and back again on the second click or if another trigger is clicked. But when any of the trigger elements is clicked all of the svgs morph. I would appreciate any help you could offer.

 

Thanks,

Tim

See the Pen LpMKaz by Fettabachi (@Fettabachi) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi KDSDeveloper 

 

pls try this :

 

$(".faq-question").each(function(){
  var tl = new TimelineLite();
      tl.to($(this).find('.plus'),0.3, { morphSVG:{shape:'.minus'}, ease:Power1.easeInOut });
      tl.reversed(true);
  this.Anim = tl;
});

$(".faq-question").on('click', function() {
  this.Anim.reversed(!this.Anim.reversed());
});

[KDSDeveloper 0 Likes (Newbie)]

Thank you for looking into this problem Diaco. The solution you provided is very close to what I'm trying to accomplish. The only problem remaining is that if one of the accordions is in an open state (the minus indicator is displayed) and a different h3 is clicked - I'd like for the other h3s indicator to morph back to the closed state (the plus indicator is displayed) and the newly clicked indicator would show the open state indicator.

[Carl 9,066 Likes (Superhero)]

please try this

 

$(".faq-question").each(function(){
  var tl = new TimelineLite();
      tl.to($(this).find('.plus'),0.3, { morphSVG:{shape:'.minus'}, ease:Power1.easeInOut });
      tl.reversed(true);
  this.Anim = tl;
});


$(".faq-question").on('click', function() {
//select every element that you did not click
  $(".faq-question").not(this).each(function(){
    this.Anim.reverse();
  });
  this.Anim.reversed(!this.Anim.reversed());
});

[KDSDeveloper 0 Likes (Newbie)]

Thank you . That works perfectly. How you use the reverse and reversed methods are confusing to me.

[Carl 9,066 Likes (Superhero)]

in short the code just says "change the reversed state to what it is not" so if the timeline is reversed, then it will play forward. If its not reversed, then it will get reversed. 

 

perhaps this video which builds a pause toggle will help as its the same concept: https://greensock.com/playpause

 

The code I added in my demo just says "reverse every animation on every item that you did not click" which will change any minus into a plus.