MorphSVGPlugin

[Parvathy]

Complete beginner to HTML/CSS/JS, SVG, GSAP and wanted to try a simple morph with the MorphSVGPlugin. Morphing does occur, but the positioning is off. Not quite sure what I am doing wrong. The rectangle on the right(or bottom) contains the begin state(smaller triangles) and the end state(bigger triangles). The left(or top) rectangle is what I get using the plugin. Any feedback would be appreciated. Thank you.

See the Pen rNxyJBb by paro1979 (@paro1979) on CodePen

[ZachSaucier]

Hey Parvathy and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

First off, we recommend using GSAP 3 syntax. It's sleeker and less confusing  See this post for more info:

 

The main issue here is that you've got transforms on your SVG elements so it looks like the correct morph isn't happening but it is. MorphSVG can't factor those into the calculations. If you don't need the transforms, just get rid of them. If you do, then use a vector editor like Illustrator or Inkscape to bake the transforms into the actual element's positioning instead. It might be helpful to just make them all paths in the editor because that's what MorphSVG uses.

 

With that being said, MorphSVG has a handy .convertToPath() method that can convert the polygons to paths if needed.

See the Pen PoZpLOg?editors=1000 by GreenSock (@GreenSock) on CodePen

[Parvathy]

Thanks Jack. Will try it out.