Animate based on mouse position

[JoeH]

Hi all, new member here.

 

I am just wondering if I should use GSAP for my requirements here, I'm pretty sure I can but just wanted to check and ask for any pointers I should take into account or which plugins I should use.

 

I basically want to animate some SVG's based upon the mouse position.

 

So imagine there is a logo made up of several SVG shapes.

 

I wish to animate these so that they move apart/away from each other, but they should then also animate back into the original position - they will not be changing shape themselves, only moving and rotating.

 

However I want to control the distance they are from each other depending upon the users mouse position.

 

So if the users mouse is in the center of the screen/logo position the animation will start and reach its end point, i.e. the logo parts will have moved away from the original position.

 

Then as the user moves their mouse away from this centre point then the distance the shapes are away from each other should reduce until an arbitrary point on the page where the logo is back to normal, and the same when the users mouse moves back towards the centre point - the shapes should start to move apart again. But never to full extent unless the users mouse is within a certain distance from this center point.

 

Excuse my noobness I am just learning how to use GSAP.

 

Thanks

[ZachSaucier]

Hey JoeH and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. 

 

It's not clear exactly what effect you're looking to create, but this sort of thing is easily achievable using GSAP! Here's a basic demo of moving some elements depending on the viewport position of the mouse:

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

[JoeH]

Wow perfect,

 

Thanks so much for the quick reply.

 

Excited to get started!

 

I've got a great project coming up which will take me a few months to build but will post here on the forum when complete.

 

Thanks again.