SVG scale transform tween doesn't work

[hrvoje 0 Likes (Newbie)]

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

[Jonathan 5,392 Likes (Superhero)]

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

[GreenSock 18,577 Likes (Superhero)]

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()). 

[Jonathan 5,392 Likes (Superhero)]

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

 

[hrvoje 0 Likes (Newbie)]

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

[GreenSock 18,577 Likes (Superhero)]

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. 

[hrvoje 0 Likes (Newbie)]

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.