MorphSVG.convertToPath() doesn't work

[iamsebastn]

Hey GSAP-Fam!

I gave the MorphSVG plugin a shot. But unfortunately it doesn't work as expected. 
So I have two different SVG's which I want to morph. I also converted the "rect" of the cross to path with the static.convertToPath() method. 

But in the end I'm always getting the warning:

"Cannot morph a <SVG> element. Use MorphSVGPlugin.convertToPath() to convert to a path before morphing."

Hopefully, somebody can give me the hint and/or help to make this work

 

Thanks @all

See the Pen RwERWeW by iamsebastn (@iamsebastn) on CodePen

[mvaneijgen]

Hi @iamsebastn you're trying to morph the SVG it self, but you want to morph the paths inside the SVG. You've two SVGs who don't share the same viewbox, so it is probably not going to look like you think they will look!

 

Also I think you want the first path of the #lines SVG to morph with first rect of the #cross SVG. Personally I would create one SVG with all your shapes, this make the morphs a lot more consistent and easier to manage. Also try giving all the shapes a distinct class name, eg .line-1 and .line-2 and then morph them to .cross-1 and .cross-2

 

Let me know if this clears things up. Hope it helps and happy tweening! 

 

See the Pen yLGJOmg?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen