Search the Community
Showing results for tags 'directionalrotation'.
-
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 🫡
- 4 replies
-
- directionalrotation
- directional rotation
-
(and 1 more)
Tagged with:
-
Hello there. I'm trying to make the directional rotation plugin work with this simple object, however, it is not behaving properly. I tried to set up a codepen but it says TWEEN is not defined, and I'm not sure why. The thing is, I would like to go the short way always, setting up rotation in radians inside a sphere. But it is not working as expected. Here is what the console is throwing:
-
The codepen is a simple version of a timescale tween either speeding up or slowing down. It uses directonalRotation. I'd love to be able to detect the first and last repeat and add easing specifically to those 2 tweens. I thought about creating 2 separate tweens to be the first and last and then sandwich a repeating one inbetween those but wondered if there was a way to automate that. For the ball rotation, it would be cool to be able to apply a Back.easeIn to the first one and a Back.easeOut to the last one.
- 10 replies
-
- directionalrotation
- ease
-
(and 1 more)
Tagged with:
-
I'm attempting to run 2 directionalRotation tweens back to back - first clockwise and then counterclockwise. My app requires that I be able to do this in 2 separate timelines which are added to a main timeline. I made the codepen short and sweet. I've tried this as 2 separate tweens in a single timeline and it has the same behavior as 2 timelines in a main timeline - it does the first timeline/tween and doesn't do the 2nd one. I just discovered this issue in my app and am supposed to release this tomorrow. Yikes. Can anyone tell me what's up? I'm using a callback to clearProps like: TweenMax.set(gp,{clearProps:"rotation"}); but tried directionalRotation as the property to clear as well. As usual, I'm sure I'm doing something wrong. Thanks in advance for the help.
-
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?
- 7 replies
-
- directionalrotation
- transform
-
(and 1 more)
Tagged with: