Start GIF Animation on Hover

Design help General
1

We need to figure out how to have a GIF start animating when it is hovered over. We have added a GIF, but the GIF itself is just looping. If this requires Javascript, where might we find the code?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Yes, you’ll need custom javascript code for this. And the gif should be set to play 1x, not loop. Here’s a few examples:

https://stackoverflow.com/questions/7473117/animating-a-gif-on-hover

Google - Start .gif on hover

3

Thanks for the examples and I understand how that works. However, we are unsure how to apply that code to a CMS reference GIF. Thanks!

4

Hey @Kylie_Howard

One simple way of doing this within the designer would be to add a background image to your div and change this image on the Hover state.

Example:
CloudApp

6 Likes
5

Ooh yeah @philippe!

I like that idea, that way the .gif or whatever would be behind the cover. I’m it would still play but not visible. And if there’s not too many on the page, it would load just fine.

What about that idea @Kylie_Howard?

1 Like
6

Thanks and Yes. That is what we had done, but we were hoping to also be able to figure out how to get the GIFs to just start and restart using hovering. Our cover image is the first frame in the GIF and we are wanting it to look seamless in the transition. Thanks again!

2 Likes
7

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.

8

This is great!

Would there be a way to set this up if the page was using a dynamic CMS page?
I’m working from a template I purchased, and the images are all filled from a CMS setup.
They currently have a “mouse hover” trigger that causes the image to scale up slightly, but really what I’m hoping for is to have a gif be revealed and play, and restart when the mouse hovers “out”.
Hope there’s a way to do this with the dynamic setup!

https://preview.webflow.com/preview/creative-director-site?utm_medium=preview_link&utm_source=designer&utm_content=creative-director-site&preview=1cb9211e7487e818c697c301a63cdd1d&workflow=preview

1 Like
9

Hi Brian! Yup, it should work just fine :+1:

You’ll need to upload the first frame and gif separately, and then map those CMS fields into the template. Good luck!

If you get stuck along the way, feel free to share a loom video and I’ll do my best to help.

10

RedOnly link to page in question

Hi Duncan,

I have tried to follow your tutorial and even attempted to take the creation of my example a step at a time and confirm the setting of the CSS an element at a time. But, for the life of me I can not replicate the behavior of your example. Any chance you can take a peek and see what I’ve gotten wrong?

Thanks in advance,
Cam

11

Nevermind…

You mention the term “hover” but don’t actually show applying it to the hover class. Almost impossible to see in Webflow unless you actively add the “hover” class to see that it had anything applied…

Got there in the end.