Restart a GIF from Beginnen by Code when MouseIn?

Ask the community
,
1

Hi Guys,
Right now I’m working on a clients website (www . chunkfilm . com). On the landing page there are a lot pictures in a repeater based on a data base. This pictures are linked database linked item sides.
When ever the mouse hovers over an individual picture a GIF should start playing.
Right now the GIFs are all hidden and will appear, when the mouse comes in.

2188×1736 616 KB

I solved it with this code*:

export function button64_mouseIn(event) {
 let $item = $w. at(event.context);
 $item('#image38').show();
}
export function button64_mouseOut(event) {
 let $item = $w. at(event.context);
 $item('#image38').hide();
}

All this works perfectly well. Please have a look on the page to get an idea, how this works.

THE PROBLEM:
The visible pictures are always the same as the first frame of the GIF. So it feels like the images becoming alive and the picture starts moving.
This works perfectly. At the first time. But from that moment on, it’s like the GIFs keep cycling through. Even if they hide in and show again. So the effect that the images start to “live” doesn’t work anymore with the second MouseIn event.

QUESTION
Is there a way to say via the code that the GIF should always start from the beginning at the MouseIn event?

THANKS!:grinning: