How to replay animated GIF that' set to play once?

Ask the community
,
1

I have placed two buttons and one animated GIF (as image) on my page. The GIF is hidden and set to play once. With the code below I can make the animated GIF play by clicking button2. The problem is that after the GIF has played once, it stay s on the last frame and will not play again when I click on button2. I suspect it has to do with reloading or viewpoint

As you can guess, I’m a raw newbie – so any help would be appreciated. Thanks.

$w.onReady( function () {
$w(‘#button1’).onClick((event) => {
$w(‘#image11’).hide();
})
$w(‘#button2’).onClick((event) => {
$w(‘#image11’).show();
})
});

2

You can do that without code, see the Wix Support page here.
https://support.wix.com/en/article/setting-your-gif-files-to-play-in-a-loop

Also, not all Wix users will have it as of yet, however you can look at using the Animations API as well.
https://www.wix.com/corvid/reference/wix-animations.html

3

Thanks GOS for getting back!

The Animation API sounds like a great answer. How do I know if I have it available to me? I loaded this code: wix.com/corvid/example/image-and-text-animation
into a page on my WIX website, but nothing happens - the page just sets there. Any thoughts?

import { timeline } from ‘wix-animations’;
$w.onReady( function () {
const target1 = $w(‘#image11’);
$w(‘#button1’).onMouseIn(() => {
timeline()
.add(target1, { y: 40, x: -40, scale: 1, duration: 600, easing: ‘easeOutCirc’ })
.play();
})
$w(‘#button1’).onMouseOut(() => {
const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: ‘easeOutCirc’ };
timeline()
.add(target1, reset)
.play();
})
})