Jump to content
Search Community

Change Draggable to Mouse Move

dude9 test
Moderator Tag

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

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

  • 4 weeks later...

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

  • 7 months later...

Hi guys, does a working example exist of the below created by @dude9? I am trying to create the same but I'm finding it really hard to make it work. Any help would be highly appreciated.



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


On 4/8/2020 at 2:28 PM, dude9 said:

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: 





Link to comment
Share on other sites

Hi there!


That's quite a complex animation, so you're unlikely to find a full solution in the forums.

This example from Blake shows how you can use mouse movement. But you'd have to write some logic to handle the wrapping images.


I'd suggest starting a new thread with what you've tried so far. Maybe some people can jump in and offer some advice.



  • 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.
  • Create New...