Scale and transformOrigin broken

[RoaldKamman]

Hey everyone,

 

I'm new to creating SVG's and gsap so please keep that in mind. 

 

I currently have 2 main issues. 

 

1: even though the scale is set to 1.01 the selected elements scales way WAY larger. 

 

2: the transform origin doesn't work in google chrome (it works in codepen). In google chrome it looks like it's going further to the left (attached picture). 

 

I would really appreciate any help. 

 

 

 

 

See the Pen rNOzboa by RoaldKamman (@RoaldKamman) on CodePen

[ZachSaucier]

Hey RoaldKamman and welcome to the GreenSock forums!

 

1 hour ago, RoaldKamman said:

1: even though the scale is set to 1.01 the selected elements scales way WAY larger. 

You're incorrect here. Let me explain why: In your SVG, that element has an initial scaleX of .29152 and an initial scaleY of .281. So when you animate to a scale value of 1.01, it actually increases size by ~350% instead of 1% like you are expecting. But it is indeed animating to the correct scale value of 1.01 (you can check yourself using your developer tools).

 

To fix that, edit your SVG to not use transforms in your vector editor. How to do that depends on which vector editor you're using.

 

1 hour ago, RoaldKamman said:

2: the transform origin doesn't work in google chrome (it works in codepen). In google chrome it looks like it's going further to the left (attached picture). 

You'll have to show us a demo where it's not working as you expect it to for us to be able to help figure out what's going on there.

[RoaldKamman]

Hey Zach, 

 

Thank you for helping out. 

 

Do you know how to turn transforms off in Inkscape? That's the program used to create this. I imagine I could also remove the transform html myself but I can also imagine that could break everything. 

 

I hope this loom video serves as a good demo, otherwise please let me know what kind of demo you need. https://www.loom.com/share/1aff03ff6a994bfe9977b57aebe64269

[ZachSaucier]

3 minutes ago, RoaldKamman said:

Do you know how to turn transforms off in Inkscape?

Here's how you remove transforms in Inkscape.

 

3 minutes ago, RoaldKamman said:

I hope this loom video serves as a good demo, otherwise please let me know what kind of demo you need.

Unfortunately it does not. Minimal code demos are always better than videos. Please create a minimal demo that recreates the issue using CodePen like you did for the other issue you were facing. This thread provides more info on how to do so:

 

[PointC]

1 minute ago, RoaldKamman said:

Do you know how to turn transforms off in Inkscape?

I don't know anything about Inkscape but I imagine using a background rectangle would help. I wrote a little post about this technique with AI, but I think you could apply it to Inkscape. 

Zach meant a demo we could edit.

 

[PointC]

Zach is typing quickly today. 🤣

[RoaldKamman]

Thanks Zach and Craig, 

 

I really appreciate the fast responses. I'm glad to know that the scaling can be fixed. 

 

I will do my best to recreate the issue in a new demo. 

 

But first I have to cut off and run some errands. 

[RoaldKamman]

Just real quick before I head out, 

 

The code in the codepen I posted originally is identical but I believe that the problem is browser related. I just tried microsoft edge(and cringed hard) but the transformOrigin works correctly there. 

 

So the transformOrigin seems to be breaking only with google chrome. Is there any known issues/solutions for chrome? 

 

Thanks again. 

[RoaldKamman]

1 hour ago, PointC said:

 

Zach meant a demo we could edit. 

 

I didn't catch that part, I had no idea. I thought you would already be able to.  uuuuuhm.... so far it looks like I need some pro version for that. 

[PointC]

Yes. Sorry, I wasn't clear. We can edit the first CodePen you posted. But you mentioned a scale issue. The original demo doesn't exhibit that behavior so we can't really help. You then showed the problem in the video, but we can't do much that. We were looking for a minimal demo that showed the odd transformOrigin behavior.

 

[PointC]

What we look for in a minimal demo is just a few elements rather than a large SVG and lots of code. Just the creation of a simplified version of the problem will quite often provide the solution. So, in your case, maybe a small SVG with a few rectangles would be a good test case to see if the group is scaling from the center as expected. You can then test in various browsers before applying it to your real project. If the minimal demo transformOrigin works as expected but your real project does not, you can start narrowing down the issue that way. Happy tweening.

 

See the Pen OJyxLzG by PointC (@PointC) on CodePen

[RoaldKamman]

3 hours ago, PointC said:

What we look for in a minimal demo is just a few elements rather than a large SVG and lots of code. Just the creation of a simplified version of the problem will quite often provide the solution. So, in your case, maybe a small SVG with a few rectangles would be a good test case to see if the group is scaling from the center as expected. 

 

Yeah, I tried using a different svg entirely and it worked fine. So i thought it might be somehow related to the scaling problem which I finally managed to fix. But even after fixing that it's still going to the left. Hopefully it will behave consistent across all elements that I want to scale. I don't really care if it's a little to the left in chrome only as long as the rest still works. I guess I will find out tomorrow because I am DONE for today man. This was frustrating enough for today. 

Thanks for your help  

[PointC]

You'll see me say this in other threads and I truly believe it. Trouble-free SVG animations come down to three things:

1. Asset prep
2. Asset prep
3. Asset prep

If you have it all planned out and sized correctly in the vector software, the actual GSAP animations are a breeze.

 

Best of luck. Let us know if you have any other GSAP related problems or questions.

 

Happy tweening.

 

[RoaldKamman]

5 hours ago, PointC said:

You'll see me say this in other threads and I truly believe it. Trouble-free SVG animations come down to three things:

1. Asset prep
2. Asset prep
3. Asset prep

If you have it all planned out and sized correctly in the vector software, the actual GSAP animations are a breeze.

Yeah, I can see that. I started this 7 days ago... You wouldn't happen to be able to point me into an article or guide that explains in detail how to do that asset prep would you? I do like being creative and I still believe that animating SVG's can be fun even though so far it's been frustrating. Next time I could not make the same mistakes.