Share Posted April 2, 2020 Hi, How to change the Draggable event to Mouse over event, same as used in this Website. Thanks. See the Pen PoqxzMV by ZachSaucier (@ZachSaucier) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 2, 2020 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 More sharing options...
Author Share Posted April 4, 2020 Hi, @ZachSaucier If you have, could you please share any examples related to this. Thanks. Link to comment Share on other sites More sharing options...
Share Posted April 4, 2020 Here are a couple of threads that talk about reacting to mouse position. Link to comment Share on other sites More sharing options...
Author Share Posted April 8, 2020 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 Thanks. Link to comment Share on other sites More sharing options...
Share Posted April 8, 2020 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. 4 Link to comment Share on other sites More sharing options...
Share Posted January 7, 2022 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. Thanks Link to comment Share on other sites More sharing options...
Share Posted January 7, 2022 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 2 1 Link to comment Share on other sites More sharing options...
Share Posted January 7, 2022 Hi @OSUblake Thank you so much. That is very helpful! All the best Link to comment Share on other sites More sharing options...
Share Posted February 3, 2022 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 More sharing options...
Share Posted February 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
Share Posted September 13, 2022 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. Thanks! 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: Thanks. Link to comment Share on other sites More sharing options...
Share Posted September 13, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now