Animated cursor-follower div that animates on top of certain objects

[cselin]

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

[GreenSock]

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: 

1. Use a gsap.quickTo() (well, one for x and one for y). That's far more efficient.
2. Why are you doing a stagger if there's only one follower? Maybe in your real one there are more?
3. Don't animate width/height if you can possibly avoid it. Animate scaleX/scaleY instead. 
4. 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!

[Rodrigo]

Hi,

 

Here is a simple example of a mouse follower using quickTo:

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[cselin]

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 : )

[cselin]

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. 

[GreenSock]

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. 

[cselin]

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! 

[GreenSock]

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? 

[cselin]

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! 

[Ajapro]

Cursor working on whole page . i want only one section(class or id ) in page not required whole page for curser 

 

 

[Rodrigo]

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!