Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

Trouble with glitchy morphSVG

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 post
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 post
Share on other sites

Whoops. Didn't see you there @Cassie :D

  • Like 1
  • Haha 2
Link to post
Share on other sites

I'll win next time.

  • Like 1
  • Haha 1
Link to post
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 post
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 post
Share on other sites

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

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

×