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!

[j_baldwin]

On 10/23/2023 at 8:07 AM, Rodrigo said:

Hi @Ajapro and welcome to the GSAP forums!

 

Maybe something like this could be a good starting point:

 

 

 

Hopefully this helps.

Happy Tweening!

 

Hi @Rodrigo, I found your code and I want to create a similar effect to show a small dic with some text when hovering on another div. I pasted your code into my files, and although when I hover the target div I can see the position values updating, I can't actually see the "follower" itself. I tried this with several different divs as well. Any ideas?

[GSAP Helper]

Hi @j_baldwin and welcome to the GSAP Forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[j_baldwin]

Thanks @GSAP Helper !

 

Eventually got this to work with multiple divs. But! It looks like scrolling affects the position of the follower within the div...

 

See the Pen BaeRdNW by j_baldwin (@j_baldwin) on CodePen

 

I alos get this is probably an inefficient way of setting up this kind of behaviour – if there's a way I can do it without duplicating the JS for every div, do let me know.