Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kyryll

Cannot animate rotate negative (jQuery GSAP)

Recommended Posts

Hi!

 

I'm new to the GSAP :) But love what I have seen so far.

 

I'm having a little problem with animating transform rotateX and rotateY. I'm using the GSAP jQuery plugin.

 

Basically executing this:

$(element).animate({transform: "rotateX(-180deg)"});

has the same effect as executing:

$(element).animate({transform: "rotateX(180deg)"});

 

I do have perspective set up, in case you were wondering.

 

Is there a special way I have to define negative values or is this a bug?

 

Thank you guys!

Kyryll

 

Link to post
Share on other sites

Hi carl,

 

Thanks for the hint!

 

Not sure if this is a workaround or if there is a proper way to use rotateX and rotateY with negative values. But this will do for now :)

 

Thank you for your help!

Link to post
Share on other sites

Just to clarify, a rotation of 180 is identical to a rotation of -180 in terms of the browser's transform matrix (use getComputedStyle() to see for yourself), so there's no way to truly discern the difference unless you leverage the platform's native transform properties like "rotationX", "rotation", "rotationY", etc. When you do that, GSAP can track everything properly for you. Plus it's more optimized for speed. So:

//OLD
$(element).animate({transform: "rotateX(-180deg)"});

//NEW
$(element).animate({rotationX:-180});

//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});

Also, "shortRotationX" is deprecated ever since we came out with DirectionalRotationPlugin which uses a more intuitive syntax that can also be used to specify clockwise or counter-clockwise movement:

//OLD
{shortRotationX:-180}

//NEW
{rotationX:"-180_short"}

//and to specify a clockwise direction:
{rotationX:"-180_cw"}

//or counter-clockwise:
{rotationX:"-180_ccw"}
  • Like 5
Link to post
Share on other sites

Does it works for objets like threejs?

I'm trying to do something similar but with a mesh on Threejs.

Right now is not taking anything.

Link to post
Share on other sites

Hi tinchoforever and welcome to the GreenSock forums,

 

We have seen plenty of people have great success with GSAP and Three.js. Here is one example: http://labs.bebensiganteng.com/html5/experiment3/?text=GreenSock

 

I'm not exactly sure where you are having a problem, I can only guess that you are not loading the DirectionalRotationPlugin, or your tween has the wrong syntax.

 

Its really impossible to trouble shoot without seeing a demo, let alone a single line of code.

We aren't really Three.js experts, but if you create a super simple demo we will certainly look at it.

It would be preferable if you would use CodePen so that we can live-edit the source and share it back with you.

 

Some tips on getting started with CodePen here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

If you need to load multiple libraries, you can just include multiple <script> tags in the html panel. 

Link to post
Share on other sites

Something tells me, tinchoforever, that the problem here is related to the fact that Three.js uses radians for rotation, not degrees. You can tell DirectionalRotationPlugin to use radians pretty easily - just set useRadians:true like the docs say :)

TweenLite.to(obj, 1, {directionalRotation:{rotation:"1.5_ccw", useRadians:true}, ease:Power2.easeInOut});

Does that help? 

 

If not, please do create a codepen demo as Carl suggested. That really helps us see what's going on. 

  • Like 3
Link to post
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.

×