Restart GIF on mouse out and mouseover?

Design help General
1

I’m trying to create a projects section with a main photo and on hover a GIF preview plays of the video project before clicking onto the project. Issue is that the GIF loads and loops and when you mouseover the gif could be at any given point in the clip.

Anyway to restart the gif on every mouse over/out event.

Another issue is that this is part of a CMS collection so I’d need this to be scalable and not hardcoded to one gif.

I believe I may need some custom JS but hoping this all can be done in webflow designer.

Any advice or workarounds?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi @niroshan :wave: I’m super late to this thread, but hoping I can leave an answer to help future readers.

I noticed a bunch of people asking how to do this in the forums, but no tutorials. So I made 3min video + cloneable showing how it can be done:

Video

Link to original post