Jump to content
Search Community

How to use directionalRotation in a transform tween?

gaggo 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

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 comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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 comment
Share on other sites

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);
}
 
 
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.
  • Like 1
Link to comment
Share on other sites

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 comment
Share on other sites

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


  • Like 1
Link to comment
Share on other sites

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 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...