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) Head to Settings -> Style, go to the Custom <head> tab and add the following code:

<script src=""></script>
<link href="" rel="stylesheet"

2) Switch over to the Custom HTML tab, changed Body to Article, then add this code to the bottom:

$(function() {

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 :-)