Custom cursor limitation

[Mattrudd]

Hi folks,

 

I've set up a video div that opens a video Lightbox when clicked. 

 

I'm using a custom cursor to nudge user interaction... the issue I have is the transitions between 'PLAY' and 'EXIT' are a little clunky.

 

I've cobbled together some short GSAP tweens in if/else statements to  manage the showing and hiding of the relevant cursors.

 

The issue - if the mouse isn't moved at all once the Lightbox is opened, exit won't appear, because of course the event listener is set to "mousemove".

Conversely, if the mouse isn't moved after exit and the cursor is over the blue thumbnail placeholder, it continues to show exit.

 

Appreciate this is standard behaviour, but in this particular instance it's not great for UX (exit still displayed after exiting!)

I'm wondering if there's an adjustment or a GSAP capability I've not aware of I could add to my tweens to allow for the hiding of the EXIT cursor automatically when the video Lightbox is no longer in view? Had a look at quickSet but the examples there with cursors seem to be centred around mouse movement also.
 

P.S. the demo is as minimal as I could think to get it while still showing the lightbox in action!

See the Pen BarGZXv by matt-rudd (@matt-rudd) on CodePen

[Cassie]

Heya! 

 

Maybe you're looking for the onComplete() callback?

Then you can say 'when this lightbox hide animation is finished, hide the exit cursor'

 

See the Pen BarGwjK?editors=0011 by GreenSock (@GreenSock) on CodePen

 

 

[Mattrudd]

Hi @Cassie!

 

Thanks for that - I knew I'd seen something along those lines!

 

Not sure this is working fully for me though - as the exit cursor survives the lightbox close...could just be my browser?
 

[Cassie]

I didn't actually write the code for you - just gave you the nudge towards the right direction. It's just a console log saying 'byeee' currently!

[Mattrudd]

🤦‍♂️

 

Thank you!

[Mattrudd]

Sorry for being slow here... added an opacity: 0 tween on the exit cursor within the onComplete... exit cursor remains after exit so I'm not quite understanding fully just yet.

 

See the Pen RwMqjPK by matt-rudd (@matt-rudd) on CodePen

 

One more nudge? 😁

[Cassie]

Sure - You've just copied a chunk of a timeline in there without a timeline. It's not valid code

 

It needs to be a tween. Like so.
 

// bad
tl.to(cursorVideoExit,{
  opacity: 0
},"-=0.5");

// good
gsap.to(cursorVideoExit,{
  opacity: 0
});

 

[Mattrudd]

I don’t think daddy daycare and coding mix haha.

 

Thanks for bearing with my sketchiness! 🤭

[Cassie]

No worries! We all have those moments, working now?

[Mattrudd]

Perfectly 🙌