Greensock transformOrigin mystery

[myradon]

Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG;

 

Why does this;

		tlBalloon1.addLabel("start", 0);
		tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start");
		tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start");

Pen A

 

 

have a different outcome then this;

		tlBalloon1.addLabel("start", 0);
		tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start");

See the Pen OQXXzJ by myradonnl (@myradonnl) on CodePen

 

OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section. 

See the Pen QQEEaE by myradonnl (@myradonnl) on CodePen

[Carl]

Glad you got it worked out. Wasn't really sure what I was supposed to see. Got kind of lost in the 60 lines of code and big SVG. In the future its best to reduce things as much as possible.

 

Anyway, just wanted to make a note that you really don't have to wrap values in css objects. You could save quite a bit of typing over time if you like

 

tlBalloon3.to(balloon3, 0.35,{ css: {x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%"}, ease:Power1.easeInOut});

//same as

tlBalloon3.to(balloon3, 0.35,{x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%", ease:Power1.easeInOut});

 

technically the longer way (that you are using) is more efficient on the processor, but not in the sense that you would ever notice in any meaningful way and you only get that performance increase when the animations are created (once) not when they run.  Good luck with the rest of your project. looks pretty cool.

[myradon]

Thanks! I forgot to mention one should ignore the HTML-pane on Codepen.

 

Other question why sometimes animation start halfway first timeline. First I though maybe the DOM isn't ready. So I wrapped Evenentlistener DOMContentReady around the code. Sometimes still same problem. The reset-button triggers event  tl.pause(0) always solves the problem. I find it a bit odd.