Darcey Posted November 13, 2019 Share Posted November 13, 2019 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 More sharing options...
GreenSock Posted November 13, 2019 Share Posted November 13, 2019 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? 1 Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
GreenSock Posted November 13, 2019 Share Posted November 13, 2019 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 More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 TweenLite VERSION: 2.1.3 * DATE: 2019-05-17 Will move to v3 now. 1 Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
OSUblake Posted November 13, 2019 Share Posted November 13, 2019 gsap.to(this.dom.preloader,1,{autoAlpha:0, onComplete: me.onFadeCompleteHandler, callbackScope: this}); 2 Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 1 minute ago, OSUblake said: callbackScope The little things eh Nice 1 thanks... App is compiling again... Applying v3 to the WebGL stuff now. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 It's also good to put the duration inside of the vars parameter: gsap.to(this.dom.preloader, {duration: 1, autoAlpha: 0, onComplete: me.onFadeCompleteHandler, callbackScope: this}); 1 Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 4 minutes ago, ZachSaucier said: It's also good to Thanks Is there a cheat sheet for migration notes from v2 to v3? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 Just now, Darcey said: Is there a cheat sheet for migration notes from v2 to v3? Not a cheat sheet per se, but the "Top 5 Features of GSAP 3" covers most of the big stuff: The GSAP 3 Release Notes are also helpful for more specifics: 2 Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 Can you please post a minimal version the issue (i.e. not your full setup) to CodePen? That will help us help you: https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 Apparently I don't know how directionRotation works in GSAP 3. @GreenSock could you enlighten us? See the Pen OJJBRWp?editors=1000 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 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 More sharing options...
OSUblake Posted November 13, 2019 Share Posted November 13, 2019 15 minutes ago, ZachSaucier said: Apparently I don't know how directionRotation works in GSAP 3. @GreenSock could you enlighten us? It's part of the CSSPlugin so it won't work with regular objects. That's why Jack was saying it could be made into a plugin. 2 Link to comment Share on other sites More sharing options...
Darcey Posted November 13, 2019 Author Share Posted November 13, 2019 2 minutes ago, OSUblake said: it could be made into Ah, ok will do an inertia kind of calc for now then, but I will def look into how to make a plugin for v3. Thanks for info and thelp guys Link to comment Share on other sites More sharing options...
GreenSock Posted November 14, 2019 Share Posted November 14, 2019 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? 2 Link to comment Share on other sites More sharing options...
Darcey Posted November 14, 2019 Author Share Posted November 14, 2019 7 hours ago, GreenSock said: Does that give you what you need? Not quite, but does show me how to make a plugin! Thanks See the Pen yLLREMd by Starglider (@Starglider) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 14, 2019 Share Posted November 14, 2019 1 hour ago, Darcey said: Not quite, but does show me how to make a plugin! Thanks Why "not quite"? What isn't working the way you expected? From what I can tell, it's working perfectly in your tests. Link to comment Share on other sites More sharing options...
Darcey Posted November 14, 2019 Author Share Posted November 14, 2019 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 More sharing options...
GreenSock Posted November 14, 2019 Share Posted November 14, 2019 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. 1 Link to comment Share on other sites More sharing options...
Darcey Posted November 14, 2019 Author Share Posted November 14, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now