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)
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:
Google - Start .gif on hover
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!
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:
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?
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!
