Question about Freezeframe.js for Pausing Animated Gifs

Hi everyone. I have a question about using Freezeframe.js to de-animate animated pixel gifs, as I have been unable to make it have the intended effect on my site. The intended effect would be either one of these two:

  • Automatically pause animated gifs but reenable them on mouse hover
  • Automatically pause animated gifs but reenable them on button click

Here’s the process I’ve gone through so far:

I started out just trying to use what I could glean from the original Github, which is a site I’m not used to navigating. I couldn’t get the script to work at all.

Then I found Benchno’s tutorial on implementing Freezeframe. This helped somewhat but did not have the intended effect – I ended up with images that were frozen but inexplicably resized to be very large.

Then I found this version of the code, which successfully froze the gifs and kept the images at their normal size… but I can’t figure out how to code the corresponding on/off toggle buttons. For reference, here is the code:

<link rel="stylesheet" href="https://unpkg.com/freezeframe@3.0.10/build/css/freezeframe_styles.min.css">
<style>.ff-container{display:inline-flex;}</style>
<script src="https://unpkg.com/freezeframe@3.0.10/build/js/freezeframe.pkgd.min.js"></script>
<script>
    $(function() {
        third = new freezeframe('.freezeframe').capture().setup();
        $('.play').click(function(e) {
            e.preventDefault();
            third.trigger();
        });
        $('.stop').click(function(e) {
            e.preventDefault();
            third.release();
        });
    })
</script>

Can anyone here tell me what code I would need to use for the on/off buttons? Alternatively, any tips on fixing the other methods of unpause (ex. hover, click on image, etc.)?

For reference, I’m working on this for my Trick-or-Treat page, where I’m displaying pixel adoptables that other people have made.

no problem! all you need is a button with the class “stop” and a button with the class “play” – you can see here in the code:

$('.play').click(function(e) & $('.stop').click(function(e)

the two parts of the script are looking for a “click” on something with the class “play” and the class “stop” !

so, you just need these:

<button class="stop">stop</button><button class="play">play</button>

since it’s just looking for the classes, you could make the toggle buttons images or divs or whatever else you wanna apply a class to (img class="stop"), but the most obvious/legible way to do it is a button.

1 Like

Ohh, okay. I saw those key words and tried setting them as ID properties and onClick properties, but I guess I must have neglected to try classes. Thanks!