How to use directionalRotation in a transform tween?

[gaggo 12 Likes (Newbie)]

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?

[Diaco 1,982 Likes (Superhero)]

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

[gaggo 12 Likes (Newbie)]

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.

[Carl 10,355 Likes (Superhero)]

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.

[gaggo 12 Likes (Newbie)]

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?

[Carl 10,355 Likes (Superhero)]

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

[gaggo 12 Likes (Newbie)]

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 "

[gaggo 12 Likes (Newbie)]

Hmm, so just now, I recieved my first digest, without changing anything Anyways, thank you!