Gsap without MorphSVG

[CedGrvl]

Hey there !

 

I have one question, is there an other way to morph svg without plugin.

 

I will take GreenSock Club membership but not now.

 

I just need a light on my way.

 

Can I combine anime.js with GSAP ? or snapsvg ?

 

Thanks !!

[mikel]

Hey @CedGrvl,

 

Welcome to the GreenSock Forums.

 

You could use the attrPlugin which is included in TweenMax to tween e.g. the path attributes.

Here an example:

 

See the Pen GRKWKbL by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[CedGrvl]

Thank you so much !!

 

Have a nice Day !

 

Ced

[GreenSock]

Yeah, just so you know, almost every other "morphing" tool out there only works when you have EXACTLY the same quantity of points in the starting and ending shapes but that's one of the things that makes MorphSVGPlugin so special - it can handle pretty much anything you throw at it. We built it around proprietary algorithms that do a really good job of finding the best way to morph something. Plus we give a lot of options like rotational morphing with any origin you want. MorphSVGPlugin is definitely the most complex plugin we've ever created but it makes your job very easy. 

 

So yes, like @mikel said, if you've got the same quantities of points it's relatively easy to use other tools. I can't imagine why you'd ever use anime.js with GSAP (because GSAP does everything anime does plus a lot more). If you need your morphs to "just work" with just about anything you throw at it, MorphSVGPlugin is definitely the way to go. 

 

Happy tweening!