Jump to content
GreenSock

KDSDeveloper

GSAP Morphing Plugin Usage

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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());
});
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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());
});
  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×