Jump to content
Search Community

cursor within bounds

TrulyNewbie test
Moderator Tag

Recommended Posts

 

Hey @TrulyNewbie

 

How about something like this:

 

Instead of applying that mousemove eventListener to the window and the updating-function to the gsap.ticker in global scope, wrap each of them in a function, you can call. Then apply them when entering the section instead, and remove them again, when leaving the section ( with eventListeners on mouseenter and mouseleave for that section).

 

Initially set your ball's scale to 0, and when entering and leaving, tween on it, to show/hide the ball when neccessary on those same mouseenter and mouseleave listeners.

 

See the Pen b0c56f76d3d3b440d5cc2a5dd73ed80b by akapowl (@akapowl) on CodePen

 

 

 

Some important things to note:

 

I took your .ball out of your .con in the HTML markup, because otherwise it would always have been part of the .con element, and the mouseentering and -leaving wouldn't work as wanted. For the same reason, I set your .ball's pointer-events to none, because you would for the most part be hovering over that element with the cursor, thus the mouseenter and leave would be firing when not wanted. And I also added 'will-change: transform' to the .ball, because it was 'smearing' when tweening on the scale on mouseenter and -leave.

 

 

 

Edit:

Or, as an alternative, keep the setup as it was ( with the mousemove eventlistener applied to the window), and only scale-in and scale-out the .ball on mouseenter and -leave of that section ( with initially setting the .ball to scale: 0 ).

 

See the Pen df4917b75fe27ebeab48f4af89e535b8 by akapowl (@akapowl) on CodePen

 

 

This looks way smoother and appears much simpler than the other suggestion.

 

 

Maybe this is what you intended, and if it isn't exactly, maybe it helps you going where you want with this.

 

Cheers,

Paul

 

 

  • Like 5
Link to comment
Share on other sites

Another alternative is to use a completely different approach: 

  • Position the cursor element in the center of the pink element. Set its scale to 0.
  • In the mouseenter of the pink section, animate the cursor element's scale to its normal scale.
  • In the mousemove of the pink section, animate the position of the cursor to the mouse position. Make sure to overwrite any animations affecting the position of the cursor element.
  • In the mouseleave of the pink section, animate the cursor element's scale back to 0 and its position back to 0, 0.
  • Like 3
Link to comment
Share on other sites

Thank you all for your help. I really appreciate it.

My last question is how can I make it so when I pass over the section without moving the mouse? I've tried onmouseover / onmouseout

Right now if the user is scroll using the trackpad, and the cursor is kept dead still, the cursor doesn't transition.

 

I appreciate any help

 

Thank you

Link to comment
Share on other sites

14 minutes ago, TrulyNewbie said:

how can I make it so when I pass over the section without moving the mouse? 

Right now if the user is scroll using the trackpad, and the cursor is kept dead still, the cursor doesn't transition.

You can do this by using JS's elementsFromPoint every tick (which isn't the most performant thing to do) or by changing your approach and using position: fixed. But then you make other things harder/impossible. So it's a matter of trade offs.

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.
×
×
  • Create New...