Custom cursor on a particular section with Next Js

[Sabz]

I'm trying to create something like if I hover on a particular section my cursor will change. I've linked my CodePen that I tried. In my case, when I'm hovering over the "show" section I'm getting the custom cursor. But when I'm moving the pointer to another section the custom cursor is not getting hidden. Also when I'm hovering over the "show" section the custom cursor is revealed from the top left corner of the page. But I need the cursor to sync with my mouse pointer. Like when I'm hovering over the section the custom cursor should reveal from the mouse location. 

 

And here is a short brief of what I've done on my code. I use "scale-0" to hide the custom cursor Initially. When I'm hovering over the "show" section I've changed the "scale" value to "1" to reveal the custom cursor. And "onMouseLeave" I've changed the scale value to "0" again to hide the custom cursor again. 

 

(Note: I'm not sure why the "Custom cursor" is not hidden initially on CodePen)

See the Pen vYPLrRj by sabbirzzaman (@sabbirzzaman) on CodePen

[mvaneijgen]

Have you seen the quickSetter docs. There are two handy demos on there that to me sound exactly what you are describing. Hope it helps and happy tweening! 

 

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

[GreenSock]

I assume you'd want a .quickTo() rather than a .quickSetter() so that it animates. You weren't setting the initial value, and you weren't removing the mousemove event listener. Is this more like what you wanted?: 

See the Pen qBvbJjm?editors=0010 by GreenSock (@GreenSock) on CodePen