Jump to content
Search Community

Trouble with glitchy morphSVG

jakob zabala test
Moderator Tag

Recommended Posts

I don't understand why sometimes shapes morph like this

 

I tried copying and pasting from illustrator and also reducing points but this B is still morphing poorly.

 

I can't figure this one out. (I can't flip the D because when I need to animate in there is unwanted flipping that gets animated)

 

 

See the Pen GRrvYep?editors=1010 by jaykobz (@jaykobz) on CodePen

Link to comment
Share on other sites

Hi Jakob,

It can be hard to get a morph that really looks *right*, in my experience a lot will look messy until you get the paths and the shapeIndex just right, and a lot of that is trial and error.

The shapeIndex property lets you change how the points in the start shape are mapped to the end shape

You can fork and can add your shapes to this pen to experiment and find one that works -

See the Pen LpxOqR by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

cassie: I tried changing shape index and never got good results!

 

PointC: AMAZING ❤️! if i may ask how did you clean it up, I went in AI and did my best to reduce points and make equal amount of points. I have read your articles and tried to use your techniques but sometimes the animation glitch out!

  • Like 1
Link to comment
Share on other sites

In this case I just used Object → Path → Simplify. (You can also right click on the path and get the same option.)

 

From there just dial the preferences to reduce points while still maintaining the shape. Other than that, the usual → make sure the start point is the same for both and the paths go in the same direction.

 

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

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

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

As I've said many times, it's all about the asset prep. ;)

 

Happy tweening.

:)

 

  • Like 2
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...