GSAP - follow cursor + draggable content/slideshow

[limbo]

Hello

 

I'm 90% there with some custom cursor  work - and wondered if anyone could spare a few mins to help me resolve a bug with the dragging of the slides with the custom cursor in place. When you click & drag (swiperJS in this instance) the cursor doesn't follow the motion and snaps back on click release.

 

I'm sure I've seen an example somewhere (codrops possibly) where it didn't do this - but I'm stretching my GSAP knowledge here.

 

Any ideas? Thanks.

 

(p.s - the content/effects below the slides are basic function tests - can ignore those).

(p.p.s - I butchered the code for the follow cursor from a post here - still getting my head round GSAP).

 

EDITED: Codepen

See the Pen qBRoQxx by liamcrean (@liamcrean) on CodePen

[GreenSock]

That definitely sounds like a Swiper question. I've never used it, sorry. We really try to keep these forums focused on GSAP-specific questions. If you've got any of those, we'd love to help. 

 

Of course if anyone else wants to jump in and offer some advice, they're totally welcome to. 

 

Thanks for being a Club GreenSock member!

[limbo]

Thanks. It's kind of a both question IMO. Defo related to Swiper but also how the GSAP code I'm using handles it — I've made a big assumption it'd happen on any draggable element...

[akapowl]

 

This thread contains a solution for your problem @limbo; using pointermove instead of mousemove.

 

 

Quoting @GreenSock

 

"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." 

 

[limbo]

Thanks @akapowl (and by proxy @GreenSock for resolving in that case).

 

Good to know there's a resolution for 'most' browsers. I can target those without support and do something a bit simpler.

 

Cheers

 

Edit: Updated codepen, works well in OSX Safari/Chrome/FF 👍

[limbo]

FWIW pointermove has pretty good support:

 

https://caniuse.com/mdn-api_document_pointermove_event

 

Safari 12 is the closest to support timewise (2019) - FF/Chrome/IE11/Edge all pretty good. I'll probably just add the standard CSS cursor back for older versions with a media query.