Jump to content
Search Community

morphSVGPlugin not smoothly transitioning

marsdei test
Moderator Tag

Recommended Posts

Hey marsdei and welcome to the GreenSock forums! 

 

Problems like this with MorphSVG are usually related to the shape index not being "correct", i.e. not what you expect it to be. You can set shapeIndex to a different number to change the starting point that MorphSVG should use. The reason this is necessary is because depending on how you create your SVGs their points may not align as you expect them to. Thus when they morph from one point to another the animation is different than how you expect it. For more information, check out the MorphSVGPlugin docs.

 

In your case, setting shapeIndex to 0 for the first morph seems to fix the issue: morphSVG:{shape: "#char_small_the_m", shapeIndex: 0}

See the Pen QWwBNRx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However, if all you're doing is scaling the SVG, you don't even need MorphSVG. You can just use scale on the SVG:

See the Pen dyPjXPp?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

This is excellent, solved my issue thanks. I had looked at shapeIndex but couldn't see how it would work in my situation

 

In terms of the scale option this actually is probably what I will end up using so thank you for the complete answer!

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