Jump to content
Search Community

SVG scale transform tween doesn't work

hrvoje test
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

  • 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

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

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.
  • Create New...