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.
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 🤷