Search the Community
Showing results for tags 'directional rotation'.
Found 3 results
-
Hey! I'm working on a mouse follower using React + TypeScript, following the new useGSAP package recommendations. I'm trying to use quickTo with the rotational direction plugin, but it would only work with degrees in number (also will throw a TS error if using TypeScript). Is this indeed a limitation, or am I missing something here? Created a demo really quick to showcase the scenario. As pointed out in line 48, using the ${rotation}_short syntax for the rotation property won't work along with a quickTo. Sample here: https://codepen.io/joyboyar/pen/WNWRQgw Also, if not this way, what would you recommend to achieve the same "lerp" effect with the rotation while doing the same as "_short" does? Thanks in advance 🫡
-
I am trying to use directional rotation plugins together with pixi.js plugins. However, it doesn't seem to be working. If you undo the comments in the codepen: https://codepen.io/asiankingofwhales/pen/RyNKBR?editors=0010, you could see that I tried three different ways: 1 directly adding "_cw" doesn't work 2. using directional rotation plugin without pixi.js plugin result in crazy rotating 3. combining directional rotation plugin with pixi plugin doesn't work at all. no rotations. Can anyone help? Or if this is not possible yet, can anyone shed some lights on how to do directional rotations with pixi.js? This is the simplified versions of a project I am working on: https://codepen.io/asiankingofwhales/pen/JvoWYY?editors=0010. Basically, I have a constantly rotating object, then at one point, I decide to rotate it to a certain point. However, I want all the rotations to be clockwise, which isn't possible at this point. I tried accessing the current rotations values, and then calculate the difference between the current and the destination values, then using the "=+" to do clockwise rotation. However, the value I am accessing always seems to be outdated. Because if the rectangle is constantly rotating, I might be getting a rotation value now, but by the time I used it to calculate differences, it's already moving to a bigger rotational angle. Or am i wrong? Any other other solutions to this problems?
-
Note: This plugin was removed from GSAP 3. However, you can register this unofficial plugin to get the effect back. Tweens any rotation-related property to another value in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example: //obj.rotation starts at 45 var obj = {rotation:45}; // In GSAP 3 directionalRotation is built in): //tweens to the 270 position in a clockwise direction gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_cw"}}); //tweens to the 270 position in a counter-clockwise direction gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_ccw"}}); //tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) gsap.to(obj, {duration: 1, directionalRotation: {rotation:"270_short"}}); // In GSAP 2 (directionRotation is an external plugin): //tweens to the 270 position in a clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_cw"}); //tweens to the 270 position in a counter-clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_ccw"}); //tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) TweenLite.to(obj, 1, {directionalRotation:"270_short"}); We used rotation here but it could be anything, like newRot.x. Notice that the value is in quotes, thus a string with a particular suffix indicating the direction ("_cw", "_ccw", or "_short"). You can also use the "+=" or "-=" prefix to indicate relative values.
