Everything posted by hrvoje
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?
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.
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 workHello 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. http://codepen.io/hrvojesimic/pen/XMybJe?editors=1010