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?