Only Play GIFs While Hovering

GIFs have become more and more popular over the years, and are very useful in knowledge bases as they provide a simple way to demonstrate or instruct without requiring a proper video.

However having them start playing as soon as the article loads can be counterproductive, and even distracting (especially when there are multiple GIFs on the page). So here is a simple way to avoid that problem!

We're going to make it so that GIFs remain on the first frame when the page loads, and only animate while the user hovers their mouse over the GIF. It repeats indefinitely, and as soon as the mouse is moved off the image it reverts back to the first frame again. Magic!

There is no way to do this natively with JavaScript (without fiddling with each GIF), but you may use a great little plugin called FreezeFrame. Just follow these steps:

1) Create a new snippet under Library Snippets. Switch to the Code Editor, paste the following script, and save.

<script src="https://cdn.rawgit.com/ctrl-freaks/freezeframe.js/master/build/js/freezeframe.pkgd.js"></script>
<link href="https://cdn.rawgit.com/ctrl-freaks/freezeframe.js/master/build/css/freezeframe_styles.min.css" rel="stylesheet"/>
<script>
$(function() {
$('.img-responsive').freezeframe();
});
</script>


2) Insert your new snippet into any article with a GIF, and it will freeze it until you hover. Check it out on our GIF below!

And voila, done! FreezeFrame also have plenty of other options (exemplified here) if you're feeling adventurous. And as always, you can get in touch with us if you need a hand or have any questions :-

GIF that only animates on hoverGIF with Freeze Frame