janessa99 Posted June 4, 2020 Share Posted June 4, 2020 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 More sharing options...
ZachSaucier Posted June 4, 2020 Share Posted June 4, 2020 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? 1 Link to comment Share on other sites More sharing options...
janessa99 Posted June 4, 2020 Author Share Posted June 4, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now