Only play GIFs while hovering

While we don't use a lot of GIFs, we do use them occasionally for showing interactive elements that can't be adequately captured in a screenshot.

Generally, the browser will start playing GIFs as soon as the article they're in loads. This can be a bit distracting.

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

Setup

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

1. Go to Library > Snippets.
2. Click the + Create New Snippet button to create a new snippet.
3. Give your snippet a Name, like Freeze Frame Plugin.
4. Give your snippet a Description, like "This plugin will make it so that GIFs will only animate when hovering."
5. In the Snippet Content section, use the dropdown to 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 Visibility, check the box to Hide from PDFs. Your snippet should look something like this:
   
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.
• Add your snippet to your overall Article Custom HTML template so it's applied to all articles.

See below for steps on each.

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

Single article use

If you'd only like to apply Freeze Frame to articles where you use it:

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 merge code from the snippet you created in the setup.
2. Go to Settings > Style.
3. Below the Preview Pane, be sure Custom HTML is selected.
4. In the Custom HTML dropdown, select Article.
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.