Mattrudd Posted August 16, 2022 Share Posted August 16, 2022 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 Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 16, 2022 Solution Share Posted August 16, 2022 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 Link to comment Share on other sites More sharing options...
Mattrudd Posted August 16, 2022 Author Share Posted August 16, 2022 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? Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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! Link to comment Share on other sites More sharing options...
Mattrudd Posted August 16, 2022 Author Share Posted August 16, 2022 🤦♂️ Thank you! 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted August 16, 2022 Author Share Posted August 16, 2022 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? 😁 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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 }); Link to comment Share on other sites More sharing options...
Mattrudd Posted August 16, 2022 Author Share Posted August 16, 2022 I don’t think daddy daycare and coding mix haha. Thanks for bearing with my sketchiness! 🤭 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 No worries! We all have those moments, working now? Link to comment Share on other sites More sharing options...
Mattrudd Posted August 16, 2022 Author Share Posted August 16, 2022 Perfectly 🙌 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