Custom cursor movement disappears on scroll

[Corentin]

Hi guys.

 

First time I post on this forum. This is a great place, where I learned a lot ! So, thanks so much.

 

But,  today I just tried to create a custom cursor, with a SVG circle, which follows the cursor. Problem : I don't know why, but when I scroll into my page, this circle disappears (I mean when I move my cursor, after scrolling). I'm testing a cool scroll effect, found in this forum. So, perhaps the problem comes from there. If someone could take a moment to look at my CodePen... Thanks a lot !

 

CodePen :

See the Pen XGpOaa by cbernadou (@cbernadou) on CodePen

[GreenSock]

Welcome to the forums, @Corentin. Glad to hear you're learning a lot. 

 

This doesn't look like a GSAP question at all, and it's tough to troubleshoot when there are other frameworks involved but from a cursory glance it looks to me like the problem may have to do with the fact that you're using the event.pageX and event.pageY to animate the left/top of an element that has its CSS position set to "fixed" which doesn't factor in any of the scroll. So the event.pageX/pageY would include the scroll whereas the fixed element positioning wouldn't, thus it's all thrown off. 

 

Maybe try setting position:absolute or adjust the positioning by adding the scroll value to the "top". 

 

Good luck!

[Corentin]

Hi guys !

 

Finally it was easy, perhaps I was too tired to see this. 

 

Thanks a lot !

 

 

 

 

[Macca]

Newb here - how did you resolve the issue in the end? I am having similar trouble.

[ZachSaucier]

Hey @Macca! Welcome to the forums. We recommend that you start a new thread about your issue, posting a minimal demo of your issue.

[OSUblake]

It's amazing how many times a bad snippet of code ends up being copied.

https://greensock.com/forums/topic/19789-follow-by-mouse/?tab=comments#comment-92033

 

Use position: fixed. 

See the Pen c0167e469feb95cd8ced1835d4e92919 by osublake (@osublake) on CodePen