morpsvg How to use MorphSVG if there are no path on SVG and svg contains shadow?

[Sajidul Islam]

Hi,

 

I would like to transform my first SVG to second SVG while scroll or On-load. The problem is, my svg doesn't contain the path directly and it has some shadow effect too. I tried to follow the official video instruction and it doesn't seems to work.

 

Is there any way to achieve this with morphSVG or I need another plugin? I'm a beginner here so, any help would be much appropriated.

 

Many Thanks

Sajidul

 

See the Pen oNmBxaM by sajidulislam0 (@sajidulislam0) on CodePen

[mvaneijgen]

Hi @Sajidul Islam, morphSVG can morph between two paths. I've given your first two ellipses an id of morphFrom and morphTo and that are the elements that morph now. The morph SVGs can only morph between paths and  <circle>, <rect>, <ellipse>, and <line> elements are not <path>, so you have to convert those which MorphSVGPlugin.convertToPath() is the perfect tool for that https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/static.convertToPath/

 

I've also changed your TimelineMax the the new syntax and add your tween to that timeline. 

 

Hope it helps and happy tweening! 

 

See the Pen dyaWPaM?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Sajidul Islam]

Hi @mvaneijgen,

 

Thanks for your guidance, It was a great help. I just have another question. Is it possible to achieve the same without the MorphSVG plugin? I meant is it possible only with GSAP?

[GreenSock]

Since in this case you're animating between the same types of shapes with the same attributes, you can just animate those, like:

See the Pen oNmWZQj by GreenSock (@GreenSock) on CodePen

 

But if you want to match the transforms, you'd need to do those as well which is a bit more involved, but hopefully this gets you going in the right direction. 

 

Enjoy!