Hey everyone!
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:
It includes some optional custom code if you want the gif to transition smoothly. Otherwise, it’s 100% native Webflow. You can view/clone the code here:
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.
In the 3min video I explain how to export the first frame and how to reduce file sizes by using a video instead.
If you have any questions, please leave a comment on the video.