GIF animation to play on Hover

Design help Animations & Interactions
1

Hi!!

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)

2

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:

3

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

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

  function playVideo(video) {
    video.play();
  }

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

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

    videoContainer.addEventListener('mouseover', () => {
      playVideo(video);
    });

    videoContainer.addEventListener('mouseout', () => {
      stopVideo(video);
    });
  });
</script>

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

image
image630Ă—1458 125 KB

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

1 Like
4

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!

https://preview.webflow.com/preview/serialmusewebsite-d949536f6228f8bf9dcd4?utm_medium=preview_link&utm_source=designer&utm_content=serialmusewebsite-d949536f6228f8bf9dcd4&preview=d8deba52adaa8e8ea92ac865c2fbedfe&workflow=preview

5

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

image
image552Ă—1750 105 KB

2 Likes
6

Thank you soooo much!!!

2 Likes
7

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

8

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

9

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

image
image1760Ă—1858 180 KB

10

Yes!! I did that but it doesn’t work :face_holding_back_tears: :face_holding_back_tears: https://preview.webflow.com/preview/serialmusewebsite-d949536f6228f8bf9dcd4?utm_medium=preview_link&utm_source=designer&utm_content=serialmusewebsite-d949536f6228f8bf9dcd4&preview=d8deba52adaa8e8ea92ac865c2fbedfe&workflow=preview

11

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.

1 Like