How to hide element when mouse cursor is off screen/viewport


Just wondering if anyone would be able to help me out with a problem I am currently facing with a custom cursor div in WF.

When you first launch the site, the mouse cursor appears in the middle of the screen as it’s parent wrapper is set to flex (align and justify center).

I was wondering if there was a way to hide this element until the mouse cursor is on the website viewport, or mouse cursor starts moving.

Your help with this would be greatly appreciated. Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @designedbymaxtaylor!

This is definitely do-able, and it looks like you were already headed in the right direction.

Essentially, you’ll want to set up an interaction on the body. When hovering on the body, start your “custom cursor show” interaction. On hover out, play your “custom cursor hide” interaction.

This doesn’t work perfectly as-is, but a few small tweaks will fix it up:

  • You’re missing an initial state on your “show” interaction. Right now, when the page loads, the cursor is already at 100% opacity. By creating an initial state with an opacity of 0, the cursor starts at 0, then transitions to 100% once you hover on the body.

  • Once you do that, you’ll still be able to see the cursor moving into place once you start hovering. You can solve this by adding a 0.2s delay to the 100% opacity keyframe.

Your body hover interaction should look like this:


Your “custom cursor show” interaction should look like this:

1 Like

Hi Nik,

Thank you so much for getting back to me!

Just tried this and it did work, but it meant that all the other elements which trigger the custom cursor to hide does not work. See how now on the navbar, the cursor is shown and can be seen above the nav links.

Any other ideas? Thanks :slight_smile: