Jump to content


Unexpected animation behaviour - element moved before 2nd animation

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

var logo = $('#logo');

var tl = new TimelineMax();
tl.to(logo, 1, {rotation:"90_cw", transformOrigin:"left top", ease:"Back.easeOut"});
tl.to(logo, 5, {rotation:"-=90", transformOrigin:"right top", ease:"Back.easeOut"});

The first rotation works just fine, but when it comes to the second, I expected it to play exactly from the element's position (and degree of rotation), as it was when the first animation's finished.

Instead the element is instantly moved in such a way that its current transformOrigin point coincides with its initial position (before the first animation), as if this point hadn't been moved in the course of the first animation. So instead of something similar to a basic falling leaf effect I get something unexpected. )


The question is-- is there a way to add on animations to the same element so its current state would smoothly change into the next one?


Or maybe I just choose transformOrigin incorrectly?


Can anyone help?
Link to comment
Share on other sites

Hi Andrei and welcome to the forums,


Unfortunately the behaviour you're experiencing is expected. Basically transform origin is a css property that states the origin point of a particular transformation, in your case two rotations, but what it doesn't do is to translate the object, if you check the element's properties with firebug or developer tools, you'll see that the transform matrix numbers associated with translation never change, whereas the ones corresponding to rotation do change, therefore the values of X and Y are zero and zero, which means that you're object just rotated but never got translated to a new position.


Then when the second tween of the timeline happens, it takes the rotated element with a  transform origin point "left top", but since the image's still in its original position it's positioned with that rotation but with the new transform point, which is "right top".


I made a simple image that I hope illustrates a little better what I'm saying: transformorigin.jpg


The blue square is the original element, the fuchsia one is the element rotated 90° CW with a transform origin "left top" and the green one is rotated 90° CW with a transform origin "right top". The red dots in indicates the transform origin of each square and the "TL" means top left to indicate where the top left corner is.


My suggestion would be to keep just one transform origin and add translation in order to simulate a falling leaf, you could also make some experimentation with the bezier plugin in order to create a falling path. The bezier choice could mean a little more work but since you can orient the element to the bezier path you can forget about the rotation and focus just on the path and let GSAP do all the job for you.


Hope this helps,



  • Like 3
Link to comment
Share on other sites

Dear rhernando,


You have been most helpful, thank you very much! )

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.