Cursor Animation

[SaifUllah]

Hi guys, is it possible to convert that red colored div (background) into the cursor follower like the white one (wherever my cursor is)? white is just an example to show how red div (background) should look after converting from background to custom cursor.

See the Pen NWLJvbG by saifullahbutt85 (@saifullahbutt85) on CodePen

[GreenSock]

The technique used in that CodePen seems rather clunky and not optimized for performance. This is probably a good use case for gsap.quickTo(). See the docs at https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Here's a quick demo from the docs: 

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

 

Does that help?

[SaifUllah]

Hi @GreenSock Thank your for this method, I'll definitely use it.

[SaifUllah]

This method isn't working fine on Scroll. whenever I scroll down the cursor follower automatically goes far to bottom. You can watch the video below and check the codepen.
 

See the Pen abaxvaB by saifullahbutt85 (@saifullahbutt85) on CodePen

 

 

 

 

[Rodrigo]

Hi,

 

Yep I see the issue. This seems to work as expected:

window.addEventListener("mousemove", e => {
  xTo(e.clientX);
  yTo(e.clientY);
});

The support for the clientY value seems to be pretty solid, so you shouldn't run into any issues with it:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY#browser_compatibility

 

Hopefully this helps.

Happy Tweening!

[SaifUllah]

Thanks @Rodrigo it is working perfectly.

[GreenSock]

Yeah, but you should be consistent and use .clientX and .clientY, not a mix of them. Since the element is position: fixed, then just use .clientX/Y. 

[LenaEvans]

On 3/28/2023 at 8:08 AM, GreenSock said:

The technique used in that CodePen seems rather clunky and not optimized for performance. This is probably a good use case for gsap.quickTo(). See the docs at https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Here's a quick demo from the docs: 

 

 

Yes, it does. Thank you for helping me out. You made my day  By the way, If you are looking for the best essay writers who can write your essay then you can try here In this website you can see many essay samples which help me to write your essay and I also can read the samples here for free.

Does that help?

Yes, it does. Thank you for helping me out. You made my day