Using quickTo along with directional rotation

[joyboy]

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

[joyboy]

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?

[GreenSock]

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. 

[joyboy]

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?

[GreenSock]

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.