Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Change Draggable to Mouse Move

Recommended Posts

Hey dude9.


You'll need to keep track of the mouse position in reference to some point (probably from the center of the viewport) and translate the container based on that.  Most likely you'd use some formula where the further the mouse away the faster the translation happens. The existing code already handles the movement of the sub lines and images so you don't have to worry about that.


Let us know if you have any specific questions! We're happy to help.

Link to comment
Share on other sites

Hi, @ZachSaucier

If you have, could you please share any examples related to this.



Link to comment
Share on other sites

Here are a couple of threads that talk about reacting to mouse position.


Link to comment
Share on other sites

Hi @ZachSaucier,

I had tried to change the Dragable animation to mouse move.

It's not working correctly!

(I'm trying to create the same background animation in this website)

Could you please check that?

Here is my codepen link: 

See the Pen qBdeyYx by devil9 (@devil9) on CodePen



Link to comment
Share on other sites

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'd be happy to dive in and help.

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

Hi @dude9


Long shot here since it has been almost a year since this post, but did you manage to make it work in the end? I need to replicate the same animation, but without the images grid. I need to make the draggable full page element drag automatically depending on the mouse position.


I hope you can point me into the right direction.



Link to comment
Share on other sites

You need to use right tools for the job, and there is nothing Draggable can be used for to make that work. It's all based on mouse position.


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


  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi @OSUblake


Thank you so much. That is very helpful!


All the best

Link to comment
Share on other sites

  • 4 weeks later...

Maybe it's not something to do with directly GSAP but how we can achieve this mouse move animation goes infinite (instead of fixed width and height) so when mouse stay on the screen edge or corner, items moving infinitely (loop) and not stop when reached the limit of the area?

Any tips on this? @OSUblake @ZachSaucier

Link to comment
Share on other sites

Well I don't have a demo for that, and that's probably a lot more involved, but you'd first have to set something to up to be infinite. Kind of like with wrap and using modifiers, and then you could control it with your mouse. 


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


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


When I get some free time, I might make a demo of that.


  • Like 1
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.