[How do tween vars relate to SVG transformations?]

New to GSAP, sorry if I'm missing something obvious, but I'm having a hard time understanding tween transformations.

 

Please look at the codepen. I have three squares of dimension 10 at origin (10,10). Blue has been translated x+10 then scaled to half. Red has been scaled to half, then translated x+10.

 

The black square I transformed using TweenMax.to() with x=10, scale=0.5 and it animates to a completely different location than the blue or red squares. I would expect it to either scale then transform, or vice versa.

 

How would you explain GSAP g tweening in relation to basic SVG transformations?

 

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

[SVG scale transform tween doesn't work]

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.

[SVG scale transform tween doesn't work]

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

[SVG scale transform tween doesn't work]

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