MorphSVG Distortion

[samwatts1988]

Hello! It’s my first time using GSAP and I’m really enjoying getting to grips with it but I’ve included a CodePen below which demonstrates an issue I’m currently having with MorphSVG. 

 

As you’ll see the animation between #stage-1 and #stage-2 works seamlessly, however when animating from #stage-1 to #stage-3 the morphing distorts quite heavily when animating between those shapes. What I’d like #stage-3 to do is morph the curves out of the curve/arch, if that makes sense. 

 

I believe I’ve followed the docs as detailed however I can’t work out whether I’ve made a classic newbie error or if there’s a more complex consideration at play here. Any pointers or help with this would be hugely appreciated!

 

Thank you! 

See the Pen LYOOjgQ by samwatts1988 (@samwatts1988) on CodePen

[mvaneijgen]

Have you seen findShapeIndex() (https://greensock.com/docs/v3/Plugins/MorphSVGPlugin) index within the docs? 

 

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

 

With `shapeIndex: [4]`, It is not exactly what you want, but you can get it a lot closer 

 

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

 

It has to do with the number of points on the shape and your stage-3 arch has a lot more points that need to move. I would try when you've got the final shape add some more points to your stage-1 shape, so that it doesn't have to move the points around so much 

[Cassie]

This article should help you pal!

 

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

 

Good luck!

[samwatts1988]

Thank you so much guys! findShapeIndex seems like a handy tool to be aware of for the future and the Motion Tricks article worked a treat. Much appreciated!