Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
janessa99

Morphing SVG paths with different transform value

Recommended Posts

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

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.
×