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.