Mouse Repel Animation

[harshg]

Hi there,
So I have just started using GSAP and I am finding it to be pretty amazing. So recently I have been working on a project, to animate bee like motion.

So I have a few bees on the screen, which I initiate using gsap.to and everything works fine.
What I am looking to achieve is a mouse repel sort of a function. Where the bees move away when the mouse comes close.
I have gone through the forums and learnt a great deal about SVG paths and alignments but unfortunately I got stuck here.

Any pointers or ideas that can help?

See the Pen bGdOrmN by lycan8 (@lycan8) on CodePen

[ZachSaucier]

Hey harshg and welcome to the GreenSock forums! 

 

In order to combine animations that affect the same properties (like the position) it's generally best to affect a container of elements. 

 

To get the particular effect you're wanting you need to calculate the distance from the mouse to each point and if it's within a certain distance move it away from the mouse. You probably want to use acceleration and velocity for that. 

 

We're happy to answer any specific questions that you have!

[harshg]

Hi Zach, thank you for the such a quick reply!
By affecting a container of elements do you mean the parent elements of these circles?
So I did try for that. I added a mousemove on the window and calculated the distance of the mouse to all the particles, and moved the particles away, while storing their last position, when the mouse came close using the setInterval function. But that causes the particles/bees to jitter, as when they move ahead, their previous position automatically gets kicked in.

So I cam across this CodePen:

See the Pen KRJmey by biblos (@biblos) on CodePen

Like I want the smooth pushback and back to it's original position. This works perfect for a stationary particles but when it starts moving, the particle get jittery. This has me stuck for a good week now. Just can't wrap my head around it yet.

Again, thank you for the reply!

[OSUblake]

6 hours ago, harshg said:

So I did try for that. I added a mousemove on the window and calculated the distance of the mouse to all the particles, and moved the particles away, while storing their last position, when the mouse came close using the setInterval function. But that causes the particles/bees to jitter, as when they move ahead, their previous position automatically gets kicked in.

 

Can you make a demo of that?

 

I'm thinking that for this to work, you would need to animate a "container" element with a motion path, and then influence the position of a child element with your mouse movement logic.

 

 

[harshg]

Hi OSUblake,
Thank you for the response.

Here is that pen