Smooth movement cursor image on hover element

[Lounes_514]

 

Hello, I discovered this nice solution that I want to use in my portfolio. To give you some context, I use Webflow and custom code often. I'm learning javascript and I am new to gsap. Basically, I just wanted to add some smoothing to the cursor movement and delay to the image relative to the cursor. In the code, how can I add some smoothness and duration? 

 

Your help is very appreciated. 

 

Thank you,

See the Pen abWeQJa by pixelarchitect (@pixelarchitect) on CodePen

[noviedo]

Hey Lounes, you can usegsap.quickTo()instead of use gsap.quickSetter() in this way you can use duration and ease for that. I leave here a fork of your pen with the changes applied. I hope that helps you!
 

See the Pen ExeyQgP by nazarenooviedo (@nazarenooviedo) on CodePen

[Lounes_514]

Hey Noviedo, 

 

Thanks a lot for your answer, that's exactly what I wanted, I just wasn't sure how to do it.

 

If you have time, I just wanted to ask your what is the difference between gsap.quickSetter() and gsap.quickTo()?

 

Thanks a lot!

[noviedo]

If you find yourself calling gsap.set() many times on the same object (or set of objects), like in a "mousemove" event, you can boost performance 50% - 250% by creating a quickSetter function and using that instead of gsap.set().
 

And on the other hand, If you find yourself calling gsap.to() many times on the same numeric property of the same target, like in a "mousemove" event, you can boost performance by creating a quickTo() function instead.
 

Basically a gsap.quickSetter() is a optimized function of gsap.set() and gsap.quickTo() is a optimized function of gsap.to()

 

I leave here both links to the documentation. (gsap.quickTo() & gsap.quickSetter())