Nysh Posted February 17, 2021 Share Posted February 17, 2021 Hey guys, I'm having a couple of issues with animating a cursor. The aim is to have the cursor smoothly snap into position when entering a box and smoothly animate back to mouse position on leave (rather than jump to the new mouse position). Also, the cursor should smoothly animate when moving from one box to the other quickly. 1. How would I go about animating the cursor smoothly back to the mouse position after leaving the box (not sure how to store the mouse position while active = false. 2. When moving from one box to the other quickly, how would I prevent the cursor from jumping/flashing back, just before it locks into the new position. Hope this makes sense. I feel like both issues are related to storing the mouse position while the fixCursor function is running? but still unsure how to make it animate smoothly. Any help is greatly appreciated. Cheers See the Pen MWbmQWK by Nysh (@Nysh) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted February 17, 2021 Share Posted February 17, 2021 Hey @Nysh, You could use the speed value: e.g. var speed = 0.1 Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
Nysh Posted February 17, 2021 Author Share Posted February 17, 2021 Hey @mikel, Thanks for the tip and quick response. I've made the speed value = 0.1 on mouseleave which makes it much smoother on mouseleave, and then I've used a timeout function (which feels a bit hacky) to return the speed variable back to 1.0. as this is the speed needed for the cursor normally. This works ok, but due to the timeout the cursor still jumps back into position. Is there a way to make the speed return to 1.0 smoothly after mouseleave , using gsap? See the Pen JjbNLwP by Nysh (@Nysh) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 There are a lot of ways to handle this. One way is to animate the speed value instead: See the Pen BaQRVze?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Nysh Posted February 17, 2021 Author Share Posted February 17, 2021 Hey @ZachSaucier~ Thanks so much, that seems to fix the first issue perfectly. However, there is still the issue of the "double jump" when moving the cursor from one box to the other back and forth quickly. Not sure why that's happening? Does it have something to do with the ticker? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 Honestly I'd probably approach it pretty differently. Instead of using a tween for positioning sometimes and the ticker sometimes I'd just use the ticker for all of it and animate the speed when necessary: See the Pen bGBWPyY by GreenSock (@GreenSock) on CodePen Side note: There's not much point in loading jQuery if that's all that you're doing. youmightnotneedjquery 2 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