Jump to content
GreenSock

Pageking

MorphSVG: Trouble with finetuning

Go to solution Solved by PointC,

Recommended Posts

Hi all,

 

I have been experimenting with MorphSVG and I am trying to make a button where the border morphs to a sort of arrow shaped border when you hover over it. This has been fairly successful but I see that the left side of the SVG morphs a bit and the animation still feels a bit too wavy.

 

How can you approach a problem like this? I am not that experienced with MorphSVG and would love some insight.

See the Pen JjpZMPy by wouter_pageking (@wouter_pageking) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Another pro tip for these kinds of morphs: change the start point of the path. The current start point is the upper left corner of the path. That's just the natural start when you create the element. Changing the start point is super easy with the scissors. I have a short tutorial about it.

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

 

If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

Here's a screengrab of your project arrow and I've cut the path to start at the middle point of the arrow. I've also added an arrowhead in AI to double check.

cPHJ5J0.jpg

When we make those changes, it all works quite smoothly and should give you the desired results.

 

See the Pen eYVKKVP by PointC (@PointC) on CodePen

 

Happy morphing.

:)

 

  • 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.
×