Morphing SVG paths with different transform value

[janessa99]

Hi!

 

I just started using the MorphSVGPlugin and I was wondering if I can change the transform value of the path. This is because the viewBox normally is not the same. But to use the plugin I thought I needed the paths to be inside the same SVG tag. Is there any way to change the transform value or the viewBox? 

 

For your information I am using ReactJs for this project.

See the Pen zYrxJjy by janessa99 (@janessa99) on CodePen.

[ZachSaucier]

Hey janessa99 and welcome to the GreenSock forums! Thanks for being a Club GreenSock member.

 

Sure you can animate any attribute. Just use the AttrPlugin by wrapping the attribute's name in an attr: {} object like so:

gsap.to("svg", {attr: {viewBox: "0 0 100 100"}});

If you're going to translate the element, you can just use the x and y properties in GSAP:

gsap.to("path", {x: 100, y: 100});

It looks like the demo link that you posted is invalid. Maybe you forgot to save your pen?

[janessa99]

Hi Zach,

 

Thanks for your quick reply!

 

I think you're right about the pen not being saved, but I also think I can get on with my project with the information you gave. Thank you!

 

I will update the pen for completeness when I have the time.