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?