TrulyNewbie Posted November 8, 2020 Share Posted November 8, 2020 Hi, I've looked on the forum and I've seen the suggestion of using this - See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen But I want to keep it inside of an area (pink), and it scales out on mouseLeave How can I achieve this? Thank you See the Pen bGemVBg by NewbieRuby (@NewbieRuby) on CodePen 1 Link to comment Share on other sites More sharing options...
akapowl Posted November 8, 2020 Share Posted November 8, 2020 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 5 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 9, 2020 Share Posted November 9, 2020 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. 3 Link to comment Share on other sites More sharing options...
mikel Posted November 9, 2020 Share Posted November 9, 2020 ... and another concept See the Pen rNewPrL by mikeK (@mikeK) on CodePen Happy pointing ... Mikel Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 9, 2020 Author Share Posted November 9, 2020 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 More sharing options...
ZachSaucier Posted November 9, 2020 Share Posted November 9, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now