Scaling down / not showing cursor on initial page load or until mouse in window

[amit95]

I have a simple custom cursor which I don't want displaying until the users mouse is within the window.

 

In my demo:

 

• If you run the pen (and are outside of the demo window), you will see my custom cursor appear in the top left of the window.
• Then, when you bring the mouse into the window, the custom cursor works fine
• When you take the cursor out of the window, the cursor scales down correctly also

 

I have tried setting gsap.set(".cursor", {scale: 0 }); but this doesn't work.

 

How can I get the cursor to not display on page refresh, until the cursor is within the window?

 

See the Pen RwyXmbj by amit_rai95 (@amit_rai95) on CodePen

[GreenSock]

I assume you're looking for something more like this: 

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

 

Notes: 

1. You don't need jQuery
2. I'd strongly recommend using transforms instead of top/left. It's less demanding on the browser (doesn't affect layout).
3. You don't need the css:{} wrapper
4. You definitely don't need a 0.016-duration tween with an infinite repeat using an onRepeat to do something. That looks like a super inefficient way to mimic requestAnimationFrame()
5. You might want to look at the docs on gsap.quickSetter() as well as gsap.quickTo() because they're good for mouse followers like this. 

I hope that helps. 

[amit95]

@GreenSock - Wasn't aware of of quickSetter(), thanks for mentioning them.

 

In regards to your demo, the cursor only scales to 1 on mouseenter . This does resolve the issue of the cursor not appearing when the page is refreshed and the users mouse is outside of the window. But, let's assume a user clicks refresh, then immediately moves there mouse into the window.  The custom cursor would be scale: 0 because the mouseenter didn't technically happen.

 

If the user then moves there mouse out of the window, then back in, then the cursor appears as it should.

[GreenSock]

@amit95 we really try to keep these forums focused on GSAP-specific questions. I don't have time to research that for you, but it seems to work fine for me as soon as the mouse moves at all. Otherwise, you'll have to find out if there's a way to have the browser tell you if the pointer is over the page without it ever even moving and I'm not sure that's possible. Good luck and please let us know what you discover. 

[amit95]

@GreenSock - I assumed it was a GSAP related question, i.e. maybe something along the lines of gsap.set(".cursor", {scale: 0 }); (which didn't work for me).

 

However, that's fine, appreciate the help anyway 👍