Dooshan Posted November 15, 2020 Share Posted November 15, 2020 I have swiper slider with images and when I try to drag it GSAP cursor gets stuck to starting drag point. How can I fix this? See the Pen pobYvOa by stdusan (@stdusan) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 16, 2020 Share Posted November 16, 2020 Hey Dooshan. Thanks for the minimal demo. However I can't seem to recreate the issue that you're talking about. Can you please provide the exact steps that you're taking to create the issue? Including browser and OS information if relevant. Link to comment Share on other sites More sharing options...
Dooshan Posted November 16, 2020 Author Share Posted November 16, 2020 2 hours ago, ZachSaucier said: Hey Dooshan. Thanks for the minimal demo. However I can't seem to recreate the issue that you're talking about. Can you please provide the exact steps that you're taking to create the issue? Including browser and OS information if relevant. It's a little bit harder when there's no slider, so I added it. Try to drag slides. https://codepen.io/stdusan/pen/pobYvOa Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 16, 2020 Share Posted November 16, 2020 Again, I am still unable to reproduce what you show in the gif. Please list exactly what you're doing and what OS and browser you're on so that I can try to reproduce the issue Link to comment Share on other sites More sharing options...
Dooshan Posted November 16, 2020 Author Share Posted November 16, 2020 2 hours ago, ZachSaucier said: Again, I am still unable to reproduce what you show in the gif. Please list exactly what you're doing and what OS and browser you're on so that I can try to reproduce the issue Mac OS, Chrome, Firefox, Safari... all acts the same. You know how you can drag certain elements on webpage? I can't do that with custom cursor because it stays on the starting point of drag. And it also messes up the swiper slider (as on codepen) With normal mouse is like this: https://imgur.com/a/MzcPkjt (it's a gif) Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 16, 2020 Solution Share Posted November 16, 2020 I see two problems: Your cursor element is obscuring the pointer/mouse events, so make sure you set pointer-events: none on that element. You're listening to "mousemove" events only, but that's not cross-browser friendly. If you put a console.log() inside the event handler, you'll see that it stops being dispatched while you're dragging (at least in some browsers). You'll probably need to listen for pointermove events at least for some browsers. But of course some older browsers don't dispatch those. And Safari uses touchmove events. So you'll need to code around that. Here's a quick fork showing how pointermove events seem to work, at least in Chrome. None of this is GSAP-related. See the Pen 631a47d84a209e071832627c0b1df717?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Dooshan Posted November 16, 2020 Author Share Posted November 16, 2020 6 minutes ago, GreenSock said: I see two problems: Your cursor element is obscuring the pointer/mouse events, so make sure you set pointer-events: none on that element. You're listening to "mousemove" events only, but that's not cross-browser friendly. If you put a console.log() inside the event handler, you'll see that it stops being dispatched while you're dragging (at least in some browsers). You'll probably need to listen for pointermove events at least for some browsers. But of course some older browsers don't dispatch those. And Safari uses touchmove events. So you'll need to code around that. Here's a quick fork showing how pointermove events seem to work, at least in Chrome. None of this is GSAP-related. Thanks a lot! I'm a newbie 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