How to Start/Stop a GIF on Hover

Hide Top Image on Hover + Reset GIF

I tried a few different options and this is my favorite when working in Webflow. As the title suggests,
I'm hiding the GIF behind a static image. I'm also using Javascript to restart the GIF onHover.
If you don't care about starting the GIF from the beginning, you can remove the JS.

Consider using Video Instead of a GIF.

The following "gif" is actually a Webflow background video. The file when from 1.5MB to 99kb, so
it's certainly worth considering video over GIF for images and complex graphics.
Note: the JavaScript to restart the animation doesn't work with videos 🤷

Double Click
to expand