Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Custom cursor movement disappears on scroll

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

Hi guys !


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


Thanks a lot !





  • Like 1
Link to comment
Share on other sites

  • 9 months later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.