JSFiddle - React, Tailwind, and code Playground

HTML

<div id="targetDIV_three" style="border:1px solid #000; z-index:999; left:349px; top:105px;; position:absolute;">
    Click me stop Gif animation
    <img src="http://demo.pink-squid.co.uk/christmas
/btn_003.png">
</div>
<img src="http://demo.pink-squid.co.uk/christmas/s3_bg.gif" id="divthree_three" />

JavaScript

$(document).ready(function () {
    $('#targetDIV_three').bind('click mousedown', function () {
       
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);

function is_gif_image(i) {
    return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
    var c = document.createElement('canvas');
    var w = c.width = i.width;
    var h = c.height = i.height;
    c.getContext('2d').drawImage(i, 0, 0, w, h);
    try {
        i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
    } catch(e) { // cross-domain -- mimic original with all its tag attributes
        for (var j = 0, a; a = i.attributes[j]; j++)
            c.setAttribute(a.name, a.value);
        i.parentNode.replaceChild(c, i);
    }
}
          });
});