cselin Posted November 21, 2022 Share Posted November 21, 2022 Hello all. I have been looking at this for too long and I'm sure there are elegant ways to do this, I've just fried my brain overcomplicating it. I have a little div that follows the cursor around. When you hover over certain objects, that little div will get bigger, animate its colours, and obtain some text from that object, eg 'click me!' When you hover out again, it should return to its original state. I'm trying to make it so the onleave animation returns it to its original state visually, and runs a little faster than the onenter. Also, it should only appear when the user is hovering over the document, so that there is never just a random dot onscreen if the user's cursor leaves the window. I've really let this get away from me. I've been trying to handle issues I've encountered, eg. - When quickly moving from one hoverable box to the other, unexpected things occur - Initially I just had one timeline animating then reversing, but I couldn't then seem to be able to unset the properties of follower -The animation just seems really jump and janky - and I feel like with every extra animation and option I've added in, it's become worse! My designer has asked me to look at the team slider on https://www.magnetism.fr/en/about/ as an example and copy that basic animation. However I've noticed even that example has some issues with the animation not completing when you move the cursor too far. I appreciate any advice you could give me on how to approach this problem better! See the Pen MWXrqGd by cselin (@cselin) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 21, 2022 Share Posted November 21, 2022 Looks like a fun effect. You've definitely got some extremely inefficient code there, though - your mousemove handler in particular is creating 3 new tweens and 1 new timeline on every single move of the mouse. I don't have time to rebuild it all for you (it's beyond the scope of help we can provide here - see the forum guidelines), but here are some tips: Use a gsap.quickTo() (well, one for x and one for y). That's far more efficient. Why are you doing a stagger if there's only one follower? Maybe in your real one there are more? Don't animate width/height if you can possibly avoid it. Animate scaleX/scaleY instead. If you want your animations dynamic, don't forget to invalidate() your followerAnim/followerLeave timelines when changing direction so that it flushes the recorded start values. Like if you're halfway through the followerAnim the first time you play the followerLeave, those halfway-through values will get locked into the followerLeave timeline and always play from there in the future. I hope that gets you going in a better direction. If you still need help, feel free to reach out to us - we do occasionally accept paid consulting work. Mouse followers like this are a bit of an art form and you really need to optimize performance as much as possible. Good luck! Link to comment Share on other sites More sharing options...
Rodrigo Posted November 21, 2022 Share Posted November 21, 2022 Hi, Here is a simple example of a mouse follower using quickTo: See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
cselin Posted November 24, 2022 Author Share Posted November 24, 2022 Thanks so much for your replies! I had somehow missed the existence of quickTo! Quote Why are you doing a stagger if there's only one follower? Maybe in your real one there are more? Wow that was fully a copy and paste from elsewhere I didn't notice. I didn't even notice when simplifying for my minimal demo! Thanks for all your advice, I'll put it into practice and it should drastically improve this animation : ) 1 Link to comment Share on other sites More sharing options...
cselin Posted November 24, 2022 Author Share Posted November 24, 2022 On 11/21/2022 at 11:40 PM, Rodrigo said: Hi, Here is a simple example of a mouse follower using quickTo: Happy Tweening! ^ For this example it was not working until I changed the pageX and pageY variables to clientX and clientY. I now have the mouse following working much better, but I'm not sure how to organise the actions on my tween to make the follower change size and text without issues occurring. If on mouseOut I just nuke the timeline with "followerAnim.time(0).pause(); followerAnim.invalidate();" things work pretty well, but I'd still like a transition out so it's not so sudden. However, when I try to play the timeline in reverse to shrink it back it doesn't work as expected. Updated codepen: See the Pen wvXmQxB by cselin (@cselin) on CodePen Just hoping there's something obvious that I'm doing wrong here - I don't thinkI I fully understand how to manipulate the timeline with reverse and invalidate. If there is some good reading on this anyone knows, that would be appreciated as well. Link to comment Share on other sites More sharing options...
GreenSock Posted November 24, 2022 Share Posted November 24, 2022 Is this what you're trying to do? See the Pen OJEvrrg?editors=0010 by GreenSock (@GreenSock) on CodePen There's no need to invalidate() when you're just trying to reverse. And if you're trying to make it go backwards at twice the speed, you can simply .timeScale(-2). Background info: When a tween renders for the first time, it records the starting and ending values for all the animating properties so that it can very quickly interpolate during the course of the tween. Think of those values as getting "locked in". If, however, you want to restart the animation and have it use whatever the current values are, you need to flush the recorded start/end values and tell the tween to do that again based on the current ones - that is what invalidate() does. I hope that helps. Link to comment Share on other sites More sharing options...
Solution cselin Posted November 27, 2022 Author Solution Share Posted November 27, 2022 Yes, that's basically what I want to do! Thanks for clarifying how these features work, i really appreciate it. It does still seem to have issues if you move between hovered objects too fast, like getting stuck with the follower object half-open, but I guess this is the kind of issue that leads to you suggesting that greensock is available for paid consulting, haha. Thank you! Link to comment Share on other sites More sharing options...
GreenSock Posted November 28, 2022 Share Posted November 28, 2022 That's because when you invalidate(), it flushes the recorded start values and then when it renders next, it records the current values as the starting ones. So in your scenario, imagine you mouse over and it animates all the way to completion, then you mouse out and it starts going in reverse but then when it's halfway done, you mouse over again - now since we invalidate() and play again, it locks in those CURRENT values as the starting ones. So now the starting values are the HALFWAY tweened ones, thus when you mouse out again and it reverses, it goes all the way back to the start and seems to leave the values in the halfway tweened state. That's precisely what it's supposed to do - those are the starting values now. See what I mean? I think I misunderstood your original goal - you don't even need to do any invalidate() - just play() and reverse(): See the Pen PoaagrN?editors=0010 by GreenSock (@GreenSock) on CodePen Is that more like what you wanted? 2 Link to comment Share on other sites More sharing options...
cselin Posted November 28, 2022 Author Share Posted November 28, 2022 Initially I had 2 different tweens for in and out, which did confuse the issue. But I think reversing the same tween is definitely going to remove headaches, if I understand things right. Thanks for your help! 1 Link to comment Share on other sites More sharing options...
Ajapro Posted October 23, 2023 Share Posted October 23, 2023 Cursor working on whole page . i want only one section(class or id ) in page not required whole page for curser Link to comment Share on other sites More sharing options...
Rodrigo Posted October 23, 2023 Share Posted October 23, 2023 Hi @Ajapro and welcome to the GSAP forums! Maybe something like this could be a good starting point: See the Pen bGzNdMy by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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