Is it possible to have the GIF play and then stopped on trigger?

[ncoetzer]

I'm wondering if it would be possible to have the gif play after init and then have it stop/toggle on trigger action e.g. When the page loads the gif play, and when the user hovers/clicks on the gif it stops?

[ncoetzer]

Tried something like this with no success, unfortunately.

const ff = new Freezeframe( '.target img', {
    trigger: false,
    overlay: true,
    responsive: false,
} );
ff.start();

[zack-pronto]

I'm seeing the same issue. The example code from the README says to do

const ff = new Freezeframe( '.target img', {
    trigger: false,
});
ff.start();     // doesn't work ❌ 

but that doesn't actually work. The gif is still paused every time. I have to make this modification for it to work:

const ff = new Freezeframe( '.target img', {
    trigger: false,
});
setTimeout(() => {
    ff.start()      // works ✅ 
}, 2000)

But that causes the gif to load paused at first, then starts playing a second or so later. 👎

My assumption is that the ff.start() is being called before the canvas is initialized and ready and is therefore being ignored. Is there a way to initialize freezeframe but have it autoplay immediately and then allow a user to pause it later? Maybe like passing in an option or something?

const ff = new Freezeframe( '.target img', {
    trigger: false,
    autoplay: true,  // new flag?
});

Or possibly give us another event to know when the canvas is ready for commands?

const ff = new Freezeframe( '.target img', {
    trigger: false,
    autoplay: true,  // new flag?
});
ff.on('ready', () => {
    ff.start()  // this shouldn't be ignored because canvas is ready
});

[nickforddev]

no, unfortunately browser security does not allow us to access the actual data of the GIFs, if they are hosted on a different domain (our primary use case), so only the first frame can be used. If you wanted to host your own gifs you could theoretically do something like this, but it's nontrivial and not in scope for this library.