ctrl-freaks/freezeframe.js

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.

freezeframe.js's Issues

FreezeFrame Prevents Videos from Playing in Edge and IE

I've used this on a Bootstrap site successfully. Now, in this WordPress site, I get errors on pages with no GIFs and in Edge and IE, videos on the site won't play. Implemented FF in the same way as the Bootstrap site, but WP is a different environment. I can't figure out the cause/solution.

https://socialmediadarlingproductions.com/10000-days/

Doesn't work with floated images

Everything works fine when I use freezeframe with non-floated images, but the moment I use float: left or float: right (on the parent element) I can't click the image anymore. Any suggestions?

Style forced to width 100%

The ff-container ff-responsive ff-ready ff-inactive element has width: 100% by default, instead of allowing the image's default size.

Start Image Fails to load IOS Chrome

The start image doesn't seem to load on an IPad in Chrome. It looks like it is loading but then it loads a blank white image with the play button.

It works on desktop chrome and android chrome just fine. This leads me to believe the problem is within the IPad version of Chrome but I'm not sure.

graceful degradation for unsupported browsers

add option for a fallback image per group / image, console warn message that freezeframe didn't run do to an unsupported browser, show the feature that is missing in case the user wants to try to include a shim

warning and error in examples/index.html due to no elements with class "my_class_4"

In index.html, due to the call to $('.my_class_4').freezeframe(); we get this warning:

freezeframe.js:17 ✨ freezeframe.js ✨ : unable to run setup(), no images captured

and this error:

freezeframe.js:340 Uncaught TypeError: ff.setup(...).attach is not a function

Should there be a 4th example, or should that call be removed?

Additionally, would it be possible to report the selector in the warning message to help with debugging?

First touch doesn't work

On a touch device, the first touch of a GIF doesn't work properly.

When you touch a GIF for the first time, it starts playing for a split-second, then stops. The 'ff-canvas-ready' class is never removed, and the 'ff-canvas-active' class is never added.

Subsequent touches work fine though, starting and stopping the animation as expected.

Any idea why the first touch doesn't work properly?

Rendering issues with transparent animated GIFs

With transparent animated GIFs (e.g., https://media.giphy.com/media/V6UrkJuSLRH7q/giphy.gif), I am seeing both a gray background and the animated GIF playing behind the frozen frame (see screenshot at https://www.dropbox.com/s/qhjvdlrxy5skeyf/Screenshot%202016-03-13%2014.43.53.png?dl=0). I'm using code from the basic example.

Otherwise, love the library. Thanks much!

Option for backward playing (or bounce like Boomerang videos)

Unable to play the GIF in a loop

I want the GIF to be played in a loop until the user clicks on it to stop. An option for this would be great!

I tried with the config: 'animation_play_duration': Infinity but then the GIF doesn't play at all.

Here is my code so far on jsBin: https://jsbin.com/zujabevezo/1/edit?html,console,output

Update check for whether an image is a gif (allow animated png and inline base64)

Because the validateFilename method only checks file name/extension, it will incorrectly trigger the "Image is not a gif" when a base64 image is provided (e.g. src="data:image/gif;base64,..."). Also, it's now possible for png's to be animated too, so the extension check for "gif" I believe needs to be updated to do a more in-depth check (if/when possible).

Personally I would be happy with an option to disable warnings since freezeframe is working as expected.

Passing a non-image element is not handled gracefully

Problem:

Currently if a selector is passed that returns a NodeList partially made up of images, and partially made up of non-image elements, an error is raised that prevents further processing.

Expected behavior:

Perhaps during element normalization we can check element type, and if it is a non-image, search for children that are images. At the very least the exception should be caught.

Applying freezeframe class to headers?

Hello, I really like this code and I was wondering if there was a way to apply the class to a header background gif instead of an image tag? In addition I applied the background itself using CSS, and tried applying the class to the header without luck. If you're able to shed some light on the issue either by suggesting how to modify the script or other measures, that'd be really awesome :)

Getting It To Work With Amazon S3

How can I get this to work with amazon s3? The image loads but it's just a normal gif. It works normally without implementing Amazons3. The url of the images are like this s3.amazonaws.com/bucket-name/image.jpg. To my understanding in order to get the play button and still frame you convert the image to dataUrl.

This is what I have implemented in my browser policy

BrowserPolicy.framing.disallow();
BrowserPolicy.content.disallowInlineScripts();
BrowserPolicy.content.disallowEval();
BrowserPolicy.content.allowInlineStyles();
BrowserPolicy.content.allowFontDataUrl();
BrowserPolicy.content.allowDataUrlForAll();
BrowserPolicy.content.allowOriginForAll('http://localhost:3000');

var trusted = [
    '*.amazonaws.com',
];

_.each(trusted, function(origin) {
    origin = "https://" + origin;
    BrowserPolicy.content.allowOriginForAll(origin);
});

I don't know what else to put. I'm not sure if this script is capable with amazon s3. Can anybody help me?

Re-initialize script when props change

Hi, I am using the react component and i just want to know if how can i reinitialize the script when the src props or image is change without reloading the page, for now if you can see the screenshot the old image is still exists and it's creating a nested div from freezeframe script.

React: Module not found: Can't resolve 'freezeframe'

getting this error when trying to use this react-freezeframe

Overlay icon on images

How do I give clue to users that the image is animated? An overlay icon which will disappear when hovered or clicked would be very nice enhancement.

Can't Get It Working :(

I have my simple page here but I just can't figure out how to get it working, thank you for any help :)

http://travisbklein.com/freeze.html

and this one I have also with the other mehtod:
http://travisbklein.com/freeze2.html

bower support

great thing !

would be very nice if it could be downloaded via bower

Is there a way to querySelect all images with file types ending in .gif?

As I understand you have to specify a freeze-frame class on that img gif tag.

Is there a way to simply querySelect all gifs and have freeze-frame apply the 1st scenario (animate on hover)?

e.g. using this css selector or some variant

$('img[src$=".gif"]')

The reason why I can't add a class is because I'm trying to see if I can use freezeframe.js on a .md file type, e.g. I usually just do this

![](https://i.imgur.com/XYt5jKm.gif)

In Firefox it works perfectly but it doesn't work in Chrome

Test: http://skyagency.pl/testfreeze/
Banner starts at: "GRILL SKONFIGURUJ". It starts at begining in Firefox but Chrome ignores function trigger()

IOS Chrome gif does not restart correctly

gif does not reset after being clicked once in IOS Chrome, so animation does not start smoothly after the first time

Responsiveness

GIFs freeze and play as advertised. But they're not responsive.

browser compatibility table needed

yup you need it!

is jquery dependency necessary?

lets talk the pros / cons of having jquery as a dependency, and what freezeframe could gain by removing jquery. good idea / bad idea?

base64 images are not compressed

Try to use FileOptimizer or tools like OptiPNG for save ~50% of image size on .ff-overlay and ff-loading-icon background-image and tools like svgomg on svg

Total up to 10% size reduction

gif as background img?

I have a gif that is the background of a div element. Ive tried adding the freezeframe class to the div but it doesnt seem to work. Any ideas?

Error when used with Gatsby: error "window" is not available during server side rendering.

The project isn't open source 😞 but here's a relevant snippet from a build:

5:22:47 PM: error "window" is not available during server side rendering.
5:22:47 PM: 
5:22:47 PM: > 1 | !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Freezeframe=n():t.Freezeframe=n()}(window,(function(){return function(t){var n={};function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return
...

gatsby-log.txt

Browser support list

Hi all,

Is there a list of supported browsers?
If it depends on the support of the dependencies, please let me know which ones I should check (jQuery, I'm guessing). Otherwise, what browsers do you officially support and will keep supporting in the future?

Thank you

only works with self-hosted or CORS-enabled images

This might save someone else's time. A canvas that uses foreign-domain images is considered tainted and the same-origin policy will prevent certain methods from working. Canvas.toDataUrl() is one of those methods; it will throw an exception and the script will perpetually appear to be loading the gifs.

Consider copying the gifs to your own server first, or opt for another solution.

Animation is not starting from the frame it was paused

The gifs are stopped and started from starting point. Is it possible to pause and play from the frame it was paused and not from the start?. i searched for documentation but couldn't find enough info.

[react-freezeframe] index.js is missing

Hi,

Thanks for the great work on this library! The gallery demo looks very promising.

I did run into 1 issue with the react binding, that the published dist/ folder doesn't have an index.js. Any ideas on how to to fix this?

Minimal example to reproduce: https://codesandbox.io/s/brave-elion-292kt?fontsize=14

IE 11 bug with hover event

hover event attached when click event specified in IE 11

how to apply a background image?

how to apply a background image, is possible?, on CSS
background-image: url(image/the.gif)

Text link overlay

Is it possible to have an tag positioned absolutely over the image and trigger the aimation on hover of the . I have a div position relative with the image and in it. I've tried the following but it doesn't seem to work for me.
var ff = new freezeframe('.my_class');
$('a').hover(function(){
ff.trigger();
});

[ReactFreezeframe] Jest import issue - Cannot use import statement outside a module

While running jest tests are failing because of this error, does anyone has the same issue?

SyntaxError: Cannot use import statement outside a module

  1 | import React, { Component, Fragment } from 'react';
> 2 | import ReactFreezeframe from 'react-freezeframe';
    | ^
  3 | import PropTypes from 'prop-types';
  4 | import classnames from 'classnames';

How to make image responsive with custom select

I'm using a custom selector ("image--animated" on the parent element). How can I still make the animated GIF responsive?

Start GIF animation once loaded into the browser

An option for this would be nice. I essentially plan to use it like the way Twitter is using it these days - play the GIF animation once it is loaded in the browser and have the user to stop it by clicking on it.

Freezing on a current frame

Is there a way to actually freeze a gif on a current frame, instead of stoping and going back to the first frame?

Multiple sets of css injected into DOM

Is there a way of only loading one set of styles?

Porting to angular/ typescript

Any change there will be a port to angular/typescript.

ECONFLICT Unable to find suitable version for jquery

When I use:

$ bower install freezeframe.js --save

The following appear:

bower freezeframe.js#*      not-cached https://github.com/ctrl-freaks/freezeframe.js.git#*
bower freezeframe.js#*         resolve https://github.com/ctrl-freaks/freezeframe.js.git#*
bower freezeframe.js#*        checkout master
bower freezeframe.js#*        resolved https://github.com/ctrl-freaks/freezeframe.js.git#f75ad95236
bower jquery#^2.2.3             cached https://github.com/jquery/jquery-dist.git#2.2.4
bower jquery#^2.2.3           validate 2.2.4 against https://github.com/jquery/jquery-dist.git#^2.2.3
bower imagesloaded-packaged#^3.1.4           cached https://github.com/alisamar/imagesloaded-packaged.git#3.1.4
bower imagesloaded-packaged#^3.1.4         validate 3.1.4 against https://github.com/alisamar/imagesloaded-packaged.git#^3.1.4
bower jquery#1.9.1 - 2                       cached https://github.com/jquery/jquery-dist.git#2.2.4
bower jquery#1.9.1 - 2                     validate 2.2.4 against https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower jquery#~2.1.1                          cached https://github.com/jquery/jquery-dist.git#2.1.4
bower jquery#~2.1.1                        validate 2.1.4 against https://github.com/jquery/jquery-dist.git#~2.1.1
bower jquery#>=1.7                           cached https://github.com/jquery/jquery-dist.git#3.1.0
bower jquery#>=1.7                         validate 3.1.0 against https://github.com/jquery/jquery-dist.git#>=1.7
bower jquery#>= 1.7.2                        cached https://github.com/jquery/jquery-dist.git#3.1.0
bower jquery#>= 1.7.2                      validate 3.1.0 against https://github.com/jquery/jquery-dist.git#>= 1.7.2
bower jquery#>= 1.9.1                        cached https://github.com/jquery/jquery-dist.git#3.1.0
bower jquery#>= 1.9.1                      validate 3.1.0 against https://github.com/jquery/jquery-dist.git#>= 1.9.1
bower                                     ECONFLICT Unable to find suitable version for jquery

I get an error. This is my bower.json:

{
  "name": "modular-admin-html",
  "version": "1.0.1",
  "devDependencies": {},
  "dependencies": {
    "animate.css": "~3.4.0",
    "bootstrap": "v4.0.0-alpha.2",
    "font-awesome": "~4.3.0",
    "jquery": "^2.2.3",
    "jquery-validation": "~1.14.0",
    "metisMenu": "~2.0.3",
    "nprogress": "~0.2.0",
    "responsive-bootstrap-toolkit": "~2.5.0",
    "tether": "~1.1.1",
    "tinycolor": "~1.2.1",
    "Sortable": "~1.4.2",
    "bootstrap-tagsinput": "^0.8.0",
    "typeahead.js": "^0.11.1"
  },  
}

I try use

"resolutions": {
    "jquery": "^2.2.3"
  }

But have the same error.

Once animation is played, keep final frame and remove freezeframe.

Hello, so I'm working on a project using this that has graphs that animate and then stop on the last frame rather than looping. I know I could time it exactly and extract the last frame with .selector, but I thought it'd just be easier if you could just disable freezeframe on a particular gif after it's activated. Currently I'm doing this by just removing the classes added by freezeframe after it's animated, but it'd be cool if there was a feature that you could specify how many times the animation ran (ie "num_loops" , "1") and then just show the final frame.

Toggle documentation

• Both vue-freezeframe and react-freezeframe are lacking documentation abut their methods.
• freezeframe is also missing a public toggle method.

How to lazy-load the GIF images with freezeframe?

I am using "freezeframe.js v3.0.10" here: https://www.matheretter.de/tutorial and would like to lazy-load all the animations. Because it is 24 MB.

Is there a way to implement lazy-loading (only when the image comes into view, it is processed)?

Thanks!

Doesn't work with my exported transparent gif from photoshop

I really love your work, but for some reason the plugin doesn't work for me, I take one of the images that you used in the examples and works fine, but with my gif doesn't, the gif doesn't stop/play, it just keeping playing in loop forever, I don't know if there is something in my exporting configuration in photoshop but i use:

<img class="freezeframe freezeframe-responsive sec-1-img" src="test2.gif">

third = new freezeframe('.sec-1-img').capture().setup();
$('.btn-img').click(function(e){
  e.preventDefault();
  third.trigger();
});

I was following the third example, and i have this behavior with the transparent gif and never stop/play

[freezeframe][feature-request] Add destroy method

The use-case is to help with cleaning up event listeners if a freezeframe gif is unmounted from the page, to avoid memory leaks.

anyway to autoplay the GIFs?

I am using vue-freezeframe, I cannot find an option to autoplay GIF, I tried to call the component's start function, it does autoplay then after re-scaling it gets paused. Please see below GIF

Userscript/browser addon version of this code

Hello, is it possible to make it as userscript or browser addon and inject on a pages?

I have a website with annoying gifs on it. I can't remove them, since they are not AD, but I want to have a cheaper and less consumed and animated page, so that I can run this script on a page and it will set all gif images to static and animate only when hover on it.

freezeframe is not working with image inside Bootstrap4 tab-pane (only in tab-pane active)

Hello.
My goal is to implement some tabs with images inside each tab (each image with freezeframe functionality).
I've tried to use freezeframe with image that is placed inside Bootstrap4 tab-pane. My code is the following:

<div>
    <ul class="nav nav-pills text-warning">
        <li class="nav-item">
            <a class="nav-link active" href="#tab-first" data-toggle="tab">First Tab</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab-second" data-toggle="tab">SecondTab</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-first">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif" />

                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
        <div class="tab-pane" id="tab-second">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b0652b31fbd0a5/1444744817955/parislove9801.gif" />
                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
    </div>
</div>

The result is that for image on the First Tab freezeframe is working correctly, but for First Tab only overlay icon is drawn (no image).
JSFiddle link

P. S. Same code is working correctly whrn images are not placed inside tab-pane.

Is that by design or a bug? Or maybe I'm missing something?
Thank you in advance.