Jump to content
Search Community

Rotate to angle tween going wrong depending on angle

Darcey test
Moderator Tag

Recommended Posts

Hi,

I used to use a feature which I can't remember, which stopped TweenMax / TweenLite from rotation tween breaking when passing 360, eg tween 330 to 0 would decrement instad of 330 to 359 and then 0. Something like that but it would stop the rotation going in the wrong direction to reach the targetted value.

 

Anyone know what feature this was?

 

Thanks

 

D

Link to comment
Share on other sites

2 minutes ago, GreenSock said:

Yep, directional rotation. It's in the new GSAP 3 as well, for DOM elements - just put "_short" at the end, like:

 


gsap.to(".class", {
  rotation:"0_short", //or _cw for clockwise, or _ccw for counter-clockwise
  duration:2
});

That makes it go in the shortest direction. 

 

Does that help?

 

I kinda remember it being a plugin or something? It's been a good few years since I used this feature...

 

I dont think _Short will work for:

 

TweenLite.to(
  this.item.rotation,
  1,
  {
    autoRound: false,
    x: this.newRot.x,
    y: this.newRot.y,
    z: this.newRot.z
  }
)

This is for a Tween in a WebGL scene.

 

 

Link to comment
Share on other sites

Yes, it was a plugin on its own back in v2 but it just didn't seem like many people used it outside of DOM manipulation, so to conserve file size and API surface area, we just baked it into CSSPlugin for v3. It wouldn't be difficult to do it in your own plugin, though. Do you have a codepen demo stubbed out that shows a super simple example (not with it working, I mean with what you'd WANT it to work with)? 

Link to comment
Share on other sites

8 minutes ago, GreenSock said:

Yes, it was a plugin on its own back in v2 but it just didn't seem like many people used it outside of DOM manipulation, so to conserve file size and API surface area, we just baked it into CSSPlugin for v3. It wouldn't be difficult to do it in your own plugin, though. Do you have a codepen demo stubbed out that shows a super simple example (not with it working, I mean with what you'd WANT it to work with)? 

 

I can do the look at fine directly with no tween but with a tween this is the result, actual code used is:

 

TweenLite.to(
  this.item.rotation,
  1,
  {
    autoRound: false,
    x: this.newRot.x,
    y: this.newRot.y,
    z: this.newRot.z
  }
)

 

 

Link to comment
Share on other sites

switching from:

 

TweenLite.to(this.dom.preloader,1,{autoAlpha:0, onComplete: me.onFadeCompleteHandler, onCompleteScope: this});

to

gsap.to(this.dom.preloader,1,{autoAlpha:0, onComplete: me.onFadeCompleteHandler, onCompleteScope: this});

 

Resulted in:

Invalid onCompleteScope tween [object Object]. Missing plugin? gsap.registerPlugin() tween of undefined Missing plugin? gsap.registerPlugin()

Link to comment
Share on other sites

Thanks for the links :)

Love GSAP been using it since Flash AS2 TweenLite days ;) 

 

RE: _short

 

Looks like it's transforming the vector 3 values to: {X: -0.5661_short Y:-0.1878_short Z:0_short} which breaks the engine's ability to use that vector with:

 

gsap.to(
  this.item.rotation,
  {
    duration: 1,
    x: this.newRot.x + "_short",
    y: this.newRot.y + "_short",
    z: this.newRot.z + "_short"
  }
)

 

Link to comment
Share on other sites

7 minutes ago, ZachSaucier said:

CodePen

 

Way too much work to get this to work in codepen and jsfiddle etc, but suffice to say, it's a BabylonJS WebGL scene, this is the lookAt handler I wrote:

 

this.oldRot = this.item.rotation.clone();
this.oldPos = this.item.position.clone();

let lookAtTarget = this.gallery.camera.position.clone();
lookAtTarget.y = lookAtTarget.y * 0.5;
this.item.lookAt(lookAtTarget);

this.newRot = this.item.rotation.clone();
this.newPos = this.item.position.clone();

this.newRotXDif = Math.abs(Math.abs(this.oldRot.x) - Math.abs(this.newRot.x));
this.newRotYDif = Math.abs(Math.abs(Math.abs(this.oldRot.y) - Math.abs(this.newRot.y)))
this.newRotZDif = Math.abs(Math.abs(this.oldRot.z) - Math.abs(this.newRot.z));
this.avgRotDif = (this.newRotXDif+this.newRotYDif+this.newRotZDif)/3;

// Restore to old rot and pos for GSAP to do it's tween
this.item.rotation = this.oldRot;
this.item.position = this.oldPos;

// Throttle look at updates
// if (this.avgRotDif > 1){
//     return;
// }

if (this.no == 29){
  this.gallery.debug[13].innerHTML = this.oldRot;
  this.gallery.debug[14].innerHTML = this.newRot;
  this.gallery.debug[15].innerHTML = this.item.rotation;
  this.gallery.debug[16].innerHTML = this.avgRotDif;
}

gsap.to(
  this.item.rotation,
  {
    duration: 1,
    x: this.newRot.x + "_short",
    y: this.newRot.y + "_short",
    z: this.newRot.z + "_short"
  }
)

newRotXDif, newRotYDif, newRotZDif,, newRotDif  will all be NAN due to string appended to number from the Tween

 

 

Link to comment
Share on other sites

Explanation:

The vars in the code I pasted in my last post:

newRotXDif, newRotYDif, newRotZDif,, newRotDif  will all be NAN due to string appended to number from the Tween concatinating + "_short"

 

So before the tween the Vector3 which is an object of x,y,z have floats for x, y and z. As soon as the tween executes those values turn into strings and thus the math calculations on those are broken resulting in NAN.  Not to mention any vector3's touched by the tween or these variables affects will no longer do anything as they are now type string and not number and thus resulting in more NAN's.

 

Regardless of the NAN being returned this wouldn't prevent the update of the Tween which doesn't do anything with + "_short"

 

 

 

RE: TweenValues

Say I need to rotate from 355 deg to 12 deg, I dont want to decrement I want to go from 355 to 359 to 0 to 12.

Link to comment
Share on other sites

Here's a plugin for you, embedded in the codepen (at the top):

See the Pen OJJBRWp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It works just like the old one - you can set useRadians:true if you need that.

 

gsap.to(obj, {
  duration: 2, 
  directionalRotation: {
    rotation: "300_short" //use whatever property names you want here. I'm using "rotation"
    // useRadians: true //optional
  }
});

Does that give you what you need? 

  • Like 2
Link to comment
Share on other sites

17 hours ago, Darcey said:

RE: TweenValues

Say I need to rotate from 355 deg to 12 deg, I dont want to decrement I want to go from 355 to 359 to 0 to 12.

 

2 minutes ago, GreenSock said:

Why "not quite"?

 

Test run:

X: From: 300 To: 10

Required: 300 > 359 > 0 > 10 (snap to 0 for 360)

Result: 300 to 370 then instantly goes to 10

 

Y: From: 200 To: 270

Required: 200 > 270 (standard increment)

Result: 200 to -90 then instantly snaps to 270

 

Z: From 0 to 350

Required: 0 to 359 to 350

Result: increments from 0 to 350

 

This prevents the flip in effect...

 

 

Link to comment
Share on other sites

6 minutes ago, Darcey said:

Test run:

X: From: 300 To: 10

Required: 300 > 359 > 0 > 10 (snap to 0 for 360)

Result: 300 to 370 then instantly goes to 10

Yes, that's by design - a rotation of 370 is identical visually to 10. It snaps at the end to ensure that it matches the end value you entered, but there's no reason to do the extra calculations with a modulus operator on every tick (at least not from what I can see). Am I missing something? 

 

8 minutes ago, Darcey said:

Y: From: 200 To: 270

Required: 200 > 270 (standard increment)

Result: 200 to -90 then instantly snaps to 270

That's because I put "_ccw" (counter clockwise) on that one, just to show you what's possible. So it's doing exactly what I told it to do. you can change that to end in "_short" if you want it to just choose the shortest direction.

 

10 minutes ago, Darcey said:

Z: From 0 to 350

Required: 0 to 359 to 350

Result: increments from 0 to 350

Was that a typo? You told the tween to animate to 350, but you want it to actually go to 359 and instantly jump back to 350? I assume it was just a typo and this tween was doing what you expected, right? 

 

Again, I don't see any problems with the way it's behaving now, so please help me understand the issue. 

  • Like 1
Link to comment
Share on other sites

RE: Typo

Nope not a type. Sequence would go 0, 359, 358, 357, 356.... 350

Which I guess _SHORT would fix

 

RE: _CCW vs SHORT

ah ha!

 

RE: 370

Not sure 370 would be interpretted as 10 in the engine, I would need to test this but I see what you mean, I was just in the 0 to 360 mode ;) 

 

I will see if I can get an actual babylonjs rotation pen going and run some tests.

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