Greasy Fork

Stop GIF Animation

I was thinking if there is a script that will include an option to stop gif animation on any webpage when the user right-clicks on the animation? There could be a context menu option (like "Stop animation"). Is this possible? Thanks!

I don't think there is a JavaScript method for this, at least in Firefox. But there are extensions:

https://addons.mozilla.org/firefox/addon/superstop/
https://addons.mozilla.org/firefox/addon/toggle-animated-gifs/

A quick web search turns up a few Chrome extensions, too.

https://www.google.com/search?q=stop+animated+gif+site%3Achrome.google.com

Seems like an addon is the only possible solution.

Here's NON-WORKING simple userjs wrapper around freezeframe.js. Firefox denies permissions required for canvas to store the frozen frame back to img element: $(this).attr("src", _ff.canvas[0].toDataURL());. Someone may wanna try to work around this by manually encoding the canvas bitmap as a base64-string, should be just a few lines of code, but I'm lazy...

// ==UserScript==
// @name          Pause GIF on mouseover
// @description   Pauses GIF animation when the mouse is over the image
// @require       https://code.jquery.com/jquery-latest.min.js
// @require       https://raw.githubusercontent.com/chrisantonellis/freezeframe/master/freezeframe.js
// @namespace     wOxxOm.scripts
// @author        wOxxOm
// @license       BY-SA http://creativecommons.org/licenses/by-sa/3.0/deed.en_US
// @version       1.0
// @include       *
// @grant         none
// @run-at        document-start
// ==/UserScript==

window.addEventListener('DOMContentLoaded', function(e) {
  function freezeGIFs(node) {
    var imgs = (node.localName == 'img') ? [n] : node.querySelectorAll('img:not(.freezeframe):not(.freezeframe_done)');
    for (var i=0, il=imgs.length; (i<il) && (img=imgs[i]); i++)
      img.classList.add('freezeframe');
    freezeframe.run();
  }

  freezeGIFs(document);

  new MutationObserver(function(mutations){
    for (var i=0, ml=mutations.length, m; (i<ml) && (m=mutations[i]); i++)
      for (var j=0, nodes=m.addedNodes, nl=nodes.length, n; (j<nl) && (n=nodes[j]); j++)
        if (n.nodeType == 1)
          freezeGIFs(n);
  }).observe(document, {subtree:true, childList:true});
});