Is it possible to activate the gifs to play on hover instead of onclick

[Chinomso1995]

I am trying to use this package and so far its amazing and I am just wondering if it were possible to get the gifs to play on hover instead of clicks.

[benwiley4000]

Interesting idea, we'd just need to make sure it plays well with touch. Theoretically it seems like we could replace the click handler with a hover handler and it would work, given that most touch platforms will handle hover on the first tap if there's a hover handler. That said I wonder if this would be the desired behavior. I wonder if the user would realize that you just have to click away to make it stop.

Le sam. 4 déc. 2021 04 h 25, Chinomso Johnson @.***> a écrit :

I am trying to use this package and so far its amazing and I am just wondering if it were possible to get the gifs to play on hover instead of clicks.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/benwiley4000/react-gif-player/issues/36, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADHOD3KA5HHO3PLWC3FUPX3UPHNB5ANCNFSM5JLL6GEQ .

[pwnedev]

@benwiley4000 I suppose the best possible UX in that case would be the gif stopping when the user stops hovering the gif

[benwiley4000]

@pwnedev this works with true hover actions and that's not where the issue lies. The problem is that there's no way to actually "hover" with touch actions (unless you're using some device which senses your finger's proximity to the device.. happens almost never I think) and so a tap simulates a hover. After this the only way to "un-hover" is to tap away from the hovered element.

This works fine for hover actions like tooltips where 1. The presence of the new content isn't majorly disruptive and 2. Users are conditioned to knowing you can tap away to close it.

I'm questioning whether it would be obvious (and desirable) to users that tapping away is how you stop a gif from playing.

Have you seen websites or apps already where this behavior is implemented?

[pwnedev]

@benwiley4000 People end up always taping away I think. But the best way to be sure would be finding an example like you said and I'm not sure If I've ever seen that exact behaviour before.

9gag app (mobile) plays all gifs while on-screen and stops them off-screen, this is the best possible UX for touch screens I can think of. (And it's already possible with react-gif-player so I would always implement it this way)

I think hover functionality for desktop, in some cases is pretty awesome and I'll miss this functionality. But yea I personally can't think of a way to make it great for touch screens either.

[benwiley4000]

I'd just prefer not to introduce too much complexity to a module whose code is otherwise pretty simple and works well with touch and mouse. The pause/resume on visible change is different behavior entirely, and I can't think of a great way to implement the hover behavior and not run into weirdness with mobile devices.

I'd suggest that if you need either of these behaviors, to copy the code for this module (it's not very big) into your own project as a jumping-off point, and adapt as needed.

For the hover behavior, instead of having a single click handler, you'll need one for pointer enter and one for pointer leave, I think.

For the visible behavior, you'll want to get rid of the overlay UI and use an intersection observer on the gif element to change the playing state.

[pwnedev]

@benwiley4000 I think you're right, what brought me to this project was how simple and effective it was in the first place, no need to complicate it :) If I need the hover functionality I'll definitely edit it tho 🤭