[MorphSVG: One path into multiple or best way to add path]

@OSUblake With respect, in such a simplistic use case, if I could have figured out the demo then I would have found (a) solution.  If the protocol here is to post the svg(s) alone then I apologize; I was simply looking for direction, not the solution - i.e. "hey that's stupid" or "this is a potential better way". I was sure an example of this existed but it appears you can't search this forum? Regardless, I appreciate your input despite my lack of demo and it provided a solution to another potential problem I was having.

@mikel Thank you for providing the demos, I hadn't considered scaling but that is a great, simplistic, solution - I got too hung up on the MorphSVG plugin to consider obvious alternatives.

[MorphSVG: One path into multiple or best way to add path]

Hello,

Standard Disclaimer: pretty new to GSAP so forgive me.

I have simple transition, a closed smile to a open mouth smile: for the purposes of this example lets say darkblue = lips, lightblue=mouth



Now, reading the documentation it's clear that the MorphSVG plugin can only go from Path > Path.

My question is, what is the appropriate way to add the second path (mouth) to the transition? My first thought was to add a transparent mouth path to the first state and transition that by color - although that would really only give the effect of opacity, not growing.

 

Second thought was to create a path in the first state that is basically a mouth closed transparent "line" which I can also morph by size and color?

Is this correct? or is there a better way?

 

Thanks in advance,
James.