Jump to content


Morphing SVG paths with different transform value

Moderator Tag

Recommended Posts



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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.