Jump to content


Animate based on mouse position

Recommended Posts

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.



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.