Can't make custom cursor "draggable"

[Dooshan]

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

[ZachSaucier]

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.

[Dooshan]

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

[ZachSaucier]

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  

[Dooshan]

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)

 

[GreenSock]

I see two problems:

1. Your cursor element is obscuring the pointer/mouse events, so make sure you set pointer-events: none on that element. 
2. 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

[Dooshan]

6 minutes ago, GreenSock said:

I see two problems:

1. Your cursor element is obscuring the pointer/mouse events, so make sure you set pointer-events: none on that element. 
2. 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