GIF animation to play on Hover


I want my gifs to start playing after they are hovered. How can I achieve this interaction??

Hope you can help. Thank you!!!

Here is my public share link: LINK
(how to access public share link)

Hii :slight_smile:

You public link is not working…

I would recommend to use Lottie instead of video, so you can set a Lottie animation to play when hover.

  1. Convert the gif to video
    GIF to MP4 (Online & Free) — Convertio

  2. Convert the video to Lottie
    Video To Lottie Converter - Isotropic

  3. Set a hover animation on the Lottie, to play when hovering.

Let me know if it worked and if worked, set this comment as solution to help others.

Thanks and good lucky :smiley:

Hi @AASM21 :wave:
You may use Background Video element + script placed on page settings Before tag :

  const videoContainers = document.querySelectorAll('.animation-play-hover');

  function playVideo(video) {;

  function stopVideo(video) {
    video.currentTime = 0;

  videoContainers.forEach((videoContainer) => {
    const video = videoContainer.querySelector('video');

    videoContainer.addEventListener('mouseover', () => {

    videoContainer.addEventListener('mouseout', () => {

Also make sure that on your videos disabled “Autoplay video”:

Live Demo: GIF animation to play on Hover
Read-Only Project: Webflow - BroPlayGround

Thank you so much bro design!! I uploaded my gif to YouTube but it shows my name and the play button, how can I get rid of this to show the video as a gif immediately after hovering? I know they are basic questions but I’m just migrating to webflow. Thanks for your time!

You should use Background Video instead Video and don’t need anythyng host on YouTube:


Thank you soooo much!!!

1 Like

Hi Bro design sorry to bother you with this again :confused: I don’t know where to place the script, if you read this I hope you can help me!!! Thank youuu

Forgot to put my link Webflow - Copy of Serial Muse Design

On the page setting where you want to put your videos:

Yes!! I did that but it doesn’t work :face_holding_back_tears: :face_holding_back_tears: Webflow - Copy of Serial Muse Design

Oh you page structure is looks no good🌝 For example read this about Heading Elements. Also your videos card structure should be redo too (check my reference structure).

Also be you may just provide me in DM your WF account credentials and I fix video cards issue.