Jump to content
Search Community

Greensock transformOrigin mystery

myradon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...