Start GIF on Hover | Play GIF on Hover

site profile thumbnail


Happy Monday! I noticed a bunch of people asking how to do this in the forums, but no tutorials. So I made one! It includes a bit of optional custom code if you want the gif to transition smoothly. Otherwise, it's 100% native Webflow. 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. Thanks all, Duncan Hamra
gifgifshoverhovereffecthoveranimationhovereffectsimagehoverhoverixcustomcodetutorialwebflowtutorialwebflow tutorialtutorialsvideotutorialforums

More by Memberstack

See profile