How to make a GIF stop playing after mouse hover

Design help Animations & Interactions
1

Hi there, I’m trying to create an interaction where:

  1. When a user hovers over the thumbnail, it fades out, and the gif plays
  2. When the user hovers off of the gif, it stops playing and the thumbnail reappears
  3. When the user hovers back onto the gif, it starts playing again from the start.

I was able to set up ineractions #1 and #2 but am having trouble with #3. The gif continues to play when my mouse hovers off of it, and when I hover over the thumbnail again it doesn’t start at the beginning.

NOTE: make sure you are in preview mode to see the interaction.

Any guidance would be appreciated!

Here is my public share link: view here

([how to access public share link]]

2

You could set “Lottie” instead of Gif, and then add animations from 0 keyframes to 100 then 100 to 0 when un-hover

3

Hi @curtis.d, try to read this: GIF animation to play on Hover