Streaming live at 10am (PST)

Play/reset animated GIF from beginning

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

Hey @PeteTrav

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

Piter :webflow_heart: