Jump to content
Search Community

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

jamesg test
Moderator Tag

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,

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

image.png.2dd6ff24bcca0c4a69e44787118c7376.png

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.

Edited by jamesg
clarified path vs state
Link to comment
Share on other sites

Hi @jamesg

 

It's always helpful if you can put what you have in a simple demo. It doesn't have to be pretty, or even working. Just something we can experiment with.

 

 

 

For this, I would probably morph the lips as a mask or clip path for a group element (<g>). In that group, I would put a darkblue rectangle to give it a background color, and for the mouth, well it probably doesn't need to be morphed. The mouth shape could probably be left as is, but move it down on the y-axis so it's not visible in the starting state. You could also scale it down a bit if needed. 

 

And to animate it, just morph the mask or clip path while moving the mouth up. But that's just one way to do it. There is no correct way.

 

And animating masks and clip paths have their own little quirks, so you should test to see what works best. If you haven't already, check out the SVG Gotchas thread. It has some good tips on working with masks and clip paths.

 

 

 

  • Like 4
Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

 

3 hours ago, jamesg said:

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 know you were just looking for advice, but I did say it doesn't have to be working. Rather than explaining something in words, it's easier to just modify a demo. That's all.

 

Is the search not working at all for you?

 

I usually just do a site search on Google.

site:greensock.com your search terms

 

  • Like 5
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.
×
×
  • Create New...