Trouble with glitchy morphSVG

[jakob zabala]

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.

[PointC]

I simplified your path in AI and it seems to work correctly for me.

See the Pen 9fda6709a706414c6e17b52bd81411fc by PointC (@PointC) on CodePen.

 

Happy tweening.

[Cassie]

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.

[PointC]

Whoops. Didn't see you there @Cassie 

[Cassie]

I'll win next time.

[jakob zabala]

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!

[PointC]

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.

 

[Cassie]

'make sure the start point is the same for both and the paths go in the same direction.' < this is very good advice.