Jump to content


SVG scale transform tween doesn't work

Moderator Tag
Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello guys,


GSAP newbie here, hope someone can tell me what I am doing wrong.

When I define scaleX value in transform attribute of SVG <g> it doesn't seem to be recognised by GSAP. Only when I explicitly set scaleX (line 2 in JS) does the tween work as intended. Translate values seem to be recognised just fine.

See the Pen XMybJe?editors=1010 by hrvojesimic (@hrvojesimic) on CodePen

Link to comment
Share on other sites

Hello hrvoje, and Welcome to the GreenSock Forum!


Sorry for the inconvenience. Your right to use scaleX and scaleY for now until we inspect this.


Please standby and we will look into this for you!


Thanks :)

  • Like 1
Link to comment
Share on other sites

  • Solution

Yes, that's correct - GSAP parses matrix() and translate() values in the transform attribute but in order to accommodate more than that (like scale(), rotate(), etc.), it'd take significantly more code and bloat CSSPlugin which didn't seem wise since this is such an edge case and typically easy to work around. We strongly recommend always setting transform-related values through GSAP because it internally caches them and manages each component (scale, x, y, rotation, skew, etc.) much more cleanly.


Is there any particular reason you need to have a scale() embedded inside the transform attribute itself rather than either setting it via GSAP or using a matrix()? (Most drawing programs I've seen generate code that uses either matrix() or translate()). 

  • Like 3
Link to comment
Share on other sites

hrvoje, Here is your same codepen from above that I forked. I uncommented out your set() tween. And removed the transform attribute on your <g> element like Jack advised and you can see it animate smoother like you originally intended.


See the Pen KWrGOX by jonathan (@jonathan) on CodePen



  • Like 2
Link to comment
Share on other sites

Thanks for the answer. Was this limitation documented somewhere? If it was I missed it :(

I'm generating SVG programatically on server, and then I run GSAP animations on client. I've switched to matrix() transformations and now it works fine. It's just that translate()/scale()/rotate() are more human readable :)

Link to comment
Share on other sites

Hm, I don't think it's specifically documented but I'm curious where you think it might belong specifically. Got any ideas?


It's always a challenge for us to make the docs detailed enough without being overwhelming. For example, I'd guess that you may be the only person who has ever run into this particular edge case who'd care about having it in the docs, so sometimes I wonder if it's best to omit it for fear that having it in the docs will confuse more people than it helps :) See what I mean? But again, if you've got a spot picked out where you think it'd be very pertinent, I'd be happy to consider dropping it in there. 

Link to comment
Share on other sites

Perhaps a special page listing what SVG features are not supported. That page can be linked from https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ and maybe other relevant sections. That way it shouldn't clutter the documentation, and yet it would make clear to people that not all SVG-defined properties are read by GSAP.

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.