Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jamesg

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

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi,

 

some time ago - a 'fork' of a German Havard Business Manager cover:

 

See the Pen QaYBmr by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×