I've set up a custom cursor to show 'PLAY' in a span within a button class, whenever the mouse hovers over a video block (when the video block is clicked, a Lightbox containing the video is opened, and the video plays).
Using a pretty sketchy if/else series of code, I've got the custom cursor to display 'EXIT' to highlight to the user that clicking the lightbox closes the video.
The issue I have is the cursor only changes when the mouse moves... so if the user doesn't move the cursor while viewing the video Lightbox, the cursor will show 'PLAY' and not EXIT. This isn't great for UX.
Is there a way around this, so the cursor changes with the change in visible elements, without requiring any mouse movement?
I've looked at the different mouse events for an event listener but can't figure this out.
const cursorMain = document.querySelector(".cursor-main");
const cursorVideo = document.querySelector(".cursor-video");
const cursorVideoExit = document.querySelector(".cursor-video-exit");
let scale = 1;
function mousemoveHandler(e) {
const target = e.target;
const tl = gsap.timeline({
defaults: {
x: e.clientX,
y: e.clientY,
ease: "power2.out"
}
});
/*/// SHOW 'PLAY' ON HOVER OVER VIDEO BLOCK ///*/
if (target.closest("#video-block")) {
tl.to(cursorMain, {
opacity: 0
}).to(
cursorVideo,
{
opacity: 1
},
"-=0.5"
);
}
/*/// SHOW 'EXIT' OVER LIGHTBOX VIDEO WRAPPER ///*/
else if (target.closest(".plyr__video-wrapper")) {
tl.to(cursorMain, {
opacity: 0,
scale: scale
}).to(
cursorVideoExit,
{
opacity: 1
},
"-=0.5"
);
}
/*/// SWITCH CURSOR FROM 'PLAY' TO BLANK CIRCLE OUTSIDE OF VIDEO BLOCK ///*/
else {
tl.to(cursorMain, {
opacity: 1,
scale: scale
}).to(
cursorVideo,
{
opacity: 0
},
"-=0.5"
);
/*/// SWITCH 'EXIT' TO 'PLAY' (OR BLANK CIRCLE IF OUTSIDE BOUNDS OF VIDEO BLOCK) ONCE THE VIDEO LIGHTBOX HAS CLOSED ///*/
tl.to(
cursorVideoExit,
{
opacity: 0
},
"-=0.5"
);
}
}
function mouseleaveHandler() {
gsap.to(cursorMain, {
opacity: 0
});
}
document.addEventListener("mousemove", mousemoveHandler);
document.addEventListener("mouseleave", mouseleaveHandler);
