joyboy Posted March 18 Share Posted March 18 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: 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 🫡 See the Pen WNWRQgw by joyboyar (@joyboyar) on CodePen Link to comment Share on other sites More sharing options...
joyboy Posted March 18 Author Share Posted March 18 Something like: gsap.to(fish, { rotation: `${angle}_short`, duration: 0.8, ease: 'back.out(1.2)' }) inside the moveHandler fuction also works. Is okey having a gsap.to() on every mousemove? Or do I have to clean the previous tweens on each update? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 18 Solution Share Posted March 18 One of the reasons gsap.quickTo() is so fast is because it skips a bunch of conveniences like unit conversions, special features like "_short", relative values, etc. - it's purely for funneling a raw number directly into an existing tween. So I would probably do it like this: See the Pen MWRJJay?editors=0010 by GreenSock (@GreenSock) on CodePen One simple tween that gets killed/replaced on each move. 3 Link to comment Share on other sites More sharing options...
joyboy Posted March 19 Author Share Posted March 19 Nice! That worked super fine. Just to understand it better: is there any reason why you prefer a single tween for the 3 properties instead of a quickTo for x and y and another tween just for the rotation? Link to comment Share on other sites More sharing options...
GreenSock Posted March 19 Share Posted March 19 3 hours ago, Joyboy said: Just to understand it better: is there any reason why you prefer a single tween for the 3 properties instead of a quickTo for x and y and another tween just for the rotation? Yep, because if we combine them all into a single tween, there's only one transform render that must occur on each tick (that's the part where the transforms get combined into a string and applied to the style). Just a small performance optimization that you'd likely never even notice in real-world scenarios but I obsess about performance. You had to create a new tween anyway on each update, so might as well just combine the x/y into that rotation one. 1 1 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