Play/reset animated GIF from beginning

Design help Animations & Interactions
1

I want to create an interaction where you hover over a static image and it plays an animated gif (not a looping gif). I achieved this through Interactions by show/hiding (swapping) the static png (which is the first frame in the gif) and the gif on hover, and then reversed it on hover out.

However, when you hover a second time, the gif sequence is stuck at the final frame because it plays through once and stops on its final frame since it isn’t a looping gif.

I can’t have it loop because when you hover, it will reveal the animated looping gif at whatever frame it’s currently at, and I want to make it look like a seamless transition between the static image and the gif. Is there any way to “reset” the gif so it plays every time, once, when you transition between hover in and out?

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Hey @PeteTrav

Not sure, but maybe you can take something from here > https://codepen.io/InSightGraphics/pen/CAlci

Piter :webflow_heart:

1 Like
3

Posting here for future reference →

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