Only play GIFs while hovering

If you use GIFs in your knowledge base, most browsers will start playing GIFs as soon as the page they're in loads.

This can be distracting and is also an accessibility concern. Refer to our image best practices section on Gif and animation usage to learn more about potential accessibility concerns.

One way to make GIFs slightly less overwhelming is to make it so that they don't start playing as soon as the page loads.

The steps below will help you set up a script so that the GIFs will initially display the first frame of the GIF. The GIF will only animate when a reader hovers their mouse over the GIF. While the mouse is hovered over the GIF, it will repeat indefinitely. Once they move their mouse off the GIF, it will return to that first frame.

You can see an example by hovering over this GIF:

GIF with Freeze Frame. Hover over me to play.

Setup

There is no way to do this natively within KnowledgeOwl, but you can use a great little plugin called FreezeFrame, which we use in this example. Follow these steps:

1. In the lefthand navigation, go to Snippets. The Snippets page opens.
2. Select + Create New Snippet to create a new snippet. If you're unfamiliar with working with snippets, refer to Create a snippet for more detailed instructions on all the following steps.
3. Enter a Snippet Name, like Freeze Frame GIF Plugin.
4. Enter a Snippet Description, like This plugin will make it so that GIFs will only animate when hovering..
5. In the Snippet Content dropdown, select Code Editor:
   
   
6. Copy the script below and paste it into the Code Editor.

   <link rel="stylesheet" href="https://unpkg.com/freezeframe@3.0.10/build/css/freezeframe_styles.min.css">
   <script type="text/javascript" src="https://unpkg.com/freezeframe@3.0.10/build/js/freezeframe.pkgd.min.js"></script>
   <script>
   $(function() {
       $('.img-responsive img[src$=".gif"],.img-responsive[src$=".gif"]').freezeframe();
   });
   </script>

7. In the righthand column of the snippet editor, check the Visibility box to Hide from PDFs.
8. Then select Create to finish creating your snippet.

With your snippet created, you can:

• Add your snippet into individual articles with GIFs you'd like to receive this treatment. Refer to Single article use to use the snippet this way.
• Add your snippet to your overall Article Custom HTML template so it's applied to all articles. Refer to All articles to use the snippet this way.

FreezeFrame has a number of other options, including an overlay icon, the option to have to click to start/stop, and more (refer to their sample page for more info).

Single article use

If you'd only like to apply Freeze Frame to specific articles:

1. Open the article with the GIF you'd like Freeze Frame applied to.
2. Insert the snippet anywhere into the article, preferably before the GIF is used.
3. Save your article.

Any GIFs in this article will now get the Freeze Frame treatment you used.

All articles

To apply Freeze Frame to all articles with GIFs in them:

1. Copy the snippet's Merge Code Value from the snippet you created in the setup.
2. Go to Customize > Style (HTML & CSS).
3. In the Customize HTML, CSS, and JS section, select Custom HTML.
4. Select Article from the Select HTML section to edit dropdown.
5. Paste the snippet merge code in anywhere in your Article Custom HTML. The bottom works well.
6. Save your changes.

Freeze Frame should now be applied to all GIFs across your knowledge base.