cursor Custom cursor Next.JS

[danshk]

Hi community, need some help.

I'm facing a problem in setting up a custom cursor for my page in Next.Js. My cursor should only work for certain blocks - it is not visible on all other blocks.
I managed to make the cursor itself, but I ran into a problem.
I have a problem with initializing the appearance of the cursor when scrolling the page. That is: when I see my cursor and start scrolling up, my custom cursor will be visible on other sections (where it shouldn't even be) until I stop scrolling and move the cursor. I want it to initialize in my block correctly
Here is an example where I think this works well (work block): 
https://www.fhoke.com/

 

And here is my demo. Here on the first block there is no cursor, on all other blocks there is. You can catch my error this way, start scrolling down the page from the first block and the custom cursor will not be visible until you stop scrolling and move the mouse. It works the same way in reverse 
https://codesandbox.io/p/sandbox/custom-cursor-chthqm?file=%2Fsrc%2FApp.tsx%3A24%2C11

 

 

 

[Rodrigo]

Hi,

 

I think this is related to the fact that there is no mouse/pointer event at all when you scroll and the mouse pointer is not moving, this is not related to GSAP at all, just the way browsers and pointer events work.

 

I did found this SO thread and the response in it is quite good IMHO:

https://stackoverflow.com/questions/68338420/mouseenter-and-mouseleave-event-with-window-scroll-event

 

Here is the codepen demo from the SO user:

See the Pen LYyRgBR?editors=1111 by Bes7weB (@Bes7weB) on CodePen

 

Hopefully this helps.

Happy Tweening!