MorphSVG animation not transitioning smoothly

[Aoibh]

Hi, 

 

I am trying to make an svg animation with 6 shapes. Shape 2 - 5 morphs smoothly however the first and last shapes aren't as smooth. I have added a CodePen to demonstrate how this looks. I have also tried using shape index but this doesn't seem to be sorting the issue. Would really appreciate any advice anyone has.

 

Thanks a million!

See the Pen oNddQLX by Aoibh (@Aoibh) on CodePen

[Rodrigo]

Hi @Aoibh and welcome to the GreenSock forums!

 

Unfortunately SVG is not my strongest suit so I can't tell you if there is an issue with your paths. @Cassie is GSAP's resident SVG wizard and hopefully she can see what the problem is. Also @mvaneijgen has a good eye for catching issues on SVG paths and animations. Hopefully they can fill the gaps I can't.

 

The things I can point out is that your syntax is incorrect, the shape index property should be wrapped in a morphSVG object:

// Bad
tm.to(circle, { morphSVG: circle2, shapeIndex: 1 }, "+=1")

// Good
tm.to(circle, { morphSVG: {shape: circle2, shapeIndex: 1 }, }, "+=1")

That configuration seems to look better, give it a try.

 

Finally, is there any particular reason to run the same instance twice at the end of the timeline?:

  .to(circle, { morphSVG: circle3 }, "+=1")
  .to(circle, { morphSVG: circle2 }, "+=1")  // <- This runs here 
  .to(circle, { morphSVG: circle2 }, "+=1"); // <- And here

Happy Tweening!

[GreenSock]

SVG prep is critical for stuff like this - I'd highly recommend this article from @PointC:

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

 

You'll get the smoothest results if you place your anchor points in the start/end shapes nicely and ensure there is a matching quantity of points. That way, MorphSVGPlugin doesn't have to fabricate them dynamically and plop them where it guesses is best. 
 

Good luck!

[Aoibh]

Hey Rodrigo and Jack,

 

Thanks so much for all your help. I tried what you both suggested and it does seem to have improved things a bit but it still isn't perfect. Would you have any further suggestions?

 

 

Thanks again!

[mvaneijgen]

I think you mean these morphs still look off?

 

See the Pen dyeKoGg by mvaneijgen (@mvaneijgen) on CodePen

 

That is because the shapes don't have the same amount of points. Most of your shapes have 8 points, but these two have 9 and 10 points, so that is where the 'weird' transform is coming from.

 

MorphSVG allows you to animate between shapes with any number of points, but if you want it to be smooth, you'll have to make sure your original paths are correctly layout and try to give them the same amount of points and have the point 'rest' at logical places, so they don't have to move to much between morphs.

[Cassie]

 

 

A little video that may help you or people in the future

 

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