Share Posted April 16, 2015 Hi there, first of all, wow!! GSAP is very impressive. I have the following code to animate the transform of an element: TweenLite.to(".element", transitionSpeed, { ease: Power2.easeInOut, css:{ transform: "scale("+scaleDiff+") rotate("+angle+"deg) translateX("+left+"px) translateY("+top+"px)" }}); Everything works as expected, except that the rotation is in the wrong direction. Can you give me a hint on how to change the direction of the rotation without loosing the transform property? Link to post Share on other sites
Share Posted April 16, 2015 Hi gaggo pls try this : TweenLite.to(".element",transitionSpeed,{ ease:Power2.easeInOut, scale:scaleDiff , rotation:angle , x:left , y:top }) by the way , there's a plugin to define particular rotate direction : DirectionalRotationPlugin ( Included in TweenMax : YES ) DirectionalRotation Doc. : http://greensock.com/docs/#/HTML5/Plugins/DirectionalRotationPlugin/ interactive example : See the Pen jiEyG by GreenSock (@GreenSock) on CodePen 1 Link to post Share on other sites
Author Share Posted April 25, 2015 Oh my, I didn't realise that you answered, thank you! I tried your suggestion, but something is odd with the positioning. Somewhere else in the forums I found this workaround, which does the job for me: function applyProps() { $(".slides").css({ transform: "rotate("+slidesTransformProps.rotation+"deg) translateX(" + slidesTransformProps.translateX + "px) translateY(" + slidesTransformProps.translateY + "px)" }); } slidesAnimation = new TweenLite.to(slidesTransformProps, transitionSpeed, { directionalRotation: { rotation: slideAngle + "_short", }, scale: scaleDiff, translateX: left, translateY: top, ease: Power2.easeInOut, onUpdate: applyProps }); Still, it would be great to know what the "GSAP" way of doing this would be. Link to post Share on other sites
Share Posted April 26, 2015 the GSAP way is as Diaco showed. Use the x, y, rotation short-hand properties. We rarely advise that you should use the full transform strings (as they require extra parsing). As you probably know, in CSS, the order that you apply multiple transforms will affect the end result. For instance the following two classes will do different things, even though they use the same values .rotateTranslate { background:red; transform: rotate(90deg) translateX(100px); -webkit-transform: rotate(90deg) translateX(100px); } .translateRotate { background:blue; transform: translateX(100px) rotate(90deg); -webkit-transform: translateX(100px) rotate(90deg); } http://codepen.io/anon/pen/ZGYBbd In GSAP the order in which transforms are applied is always consistent. This is good because you can rely on things being a certain way, always. This suits the needs of users in a vast majority of use cases. However if you want absolute control over the order in which transforms are applied you will need to populate those transform strings as you are doing now. 1 Link to post Share on other sites
Author Share Posted April 27, 2015 Hmm ok, I see... Can you tell me the order in which the transforms are applied? I would need to rotate first and translateX/translateY later. P.s.: Thanks for the tip with the transform order, didn't know that! P.P.s: Is there a way to get email notifications for posts I am following here in the forum? Link to post Share on other sites
Share Posted April 27, 2015 The order that transforms are applied is translation, rotation, scale, skew. As I shown in my demo, if we applied rotation first then changes to translateX() would be vertical (which would be unexpected (yet correct) in most cases). I probably should have explained that reasoning the first time. -- It seems you found how to follow this topic (get email notifications) http://prntscr.com/6yt9e7 If you want to automatically follow all topics that you reply to you can set that up via your dashboard. Follow this path: http://prntscr.com/6yta4n Be sure to check your spam folder or whitelist emails from greensock.com 1 Link to post Share on other sites
Author Share Posted April 28, 2015 Hi Carl, thanks so much for your explanations! About the notifications: I checked all my spam-folders and couldn't find any mails from greensock.com. Also, my Notifications indicator on my profile page showed "NOTIFICATIONS (0)", although you had answered, If I remember correctly. I had to go over "Topics" and then go to this post to find out you had answered me. Maybe it's me, maybe a bug... You never really know P.s.: Another Bug I have when posting here: The whole screen fills with the following message: "Warning: Illegal string offset 'post' in /home/greensoc/public_html/forums/hooks/StopSpamAjax_435022f28bbe04c34c3a760af68881c7.php on line 53 Warning: Illegal string offset 'post' in /home/greensoc/public_html/forums/hooks/StopSpamAjax_435022f28bbe04c34c3a760af68881c7.php on line 53 Warning: Illegal string offset 'post' in " Link to post Share on other sites
Author Share Posted April 28, 2015 Hmm, so just now, I recieved my first digest, without changing anything Anyways, thank you! Link to post Share on other sites