FreezeFrame.js for Gifs, Help

I’m very interested in getting this functionality to work on webflow.

Freezframe.js makes it so you can control animated gif files with actions like rollover and click.
examples: freezeframe.js

The github page:

From that page these are the basic instructions for getting it up and running:

Files & Dependencies

Include the js and css from /build/

If you do not use a packaged version the following dependencies are required. These files can be found in /src/js/vendor/: imagesLoaded Packaged v4.0.0 ( https://github.com/desandro/imagesloaded ) jQuery

Basic Usage: jQuery Plugin

Capture the image you want by selector and run the freezeframe() function.

$(‘myclass’).freezeframe();

This is what my custom code section looks like header part first then footer:

<link rel="stylesheet" href="http://travisbklein.com/freezeframe.js-master/build/css/freezeframe_styles.min.css">
<script src="http://travisbklein.com/freezeframe.js-master/build/js/freezeframe.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="htp://travisbklein.com/freezeframe.js-master/src/js/vendor/jquery-2.1.4.js"></script>
> <script>
>    var ff = new freezeframe({
>   'selector': 'myclass',
>   'animation_play_duration': 3000,
>   'non_touch_device_trigger_event': 'hover'
> })
> </script>

I have named my class “myclass” and I think that’s what goes in the script in that place, but maybe thats not even right.

Thank you so much if anyone can help me with this… cough cough @bart hehe :smile:

Edit: I also tried this at the bottom of my custom code instead of what is there now:
$(‘myclass’).freezeframe();


Here is my public share link: https://preview.webflow.com/preview/traviss-amazing-site-b0831e?preview=bd5eec2072ba3ff8feedae266f0f750b
(how to access public share link)

Hi @TravisBKlein, I took a quick peek at the published site, and there are some jQuery errors, which looks like those scripts are being loaded before the 2.1.4 version of jQuery has been loaded.

I would put this line in the Header:

<link rel="stylesheet" href="http://travisbklein.com/freezeframe.js-master/build/css/freezeframe_styles.min.css">

And these lines in the Footer:

<script src="http://travisbklein.com/freezeframe.js-master/build/js/freezeframe.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="htp://travisbklein.com/freezeframe.js-master/src/js/vendor/jquery-2.1.4.js"></script>
<script>
  var ff = new freezeframe({
 'selector': 'myclass',
 'animation_play_duration': 3000,
   'non_touch_device_trigger_event': 'hover'
})
</script>

I would try to see if the plugin will work with the version that gets added automatically to a site (jQuery 1.11.1). Just comment out or leave out the jquery-2.1.4.

If you do need this, then you might need to use the jQuery noconflict method: jQuery.noConflict() | jQuery API Documentation

I would check those things first, then let me know and I can take another look at the site to see if there are new/changed errors. The troubleshooting process repeats until the plugin is working :slight_smile:

Wow great post @cyberdave, thank you alot! I cleared the errors and learned that inspecting actually shows the console I never knew that!

So your ideas worked on getting the errors cleared but still I can’t get my gif to respond to a hover action.

I tried your changes in iterations as to debug the problem so I tried all different combinations of the changes.

This is my footer code right now:

<script src="http://travisbklein.com/freezeframe.js-master/build/js/freezeframe.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="http://travisbklein.com/freezeframe.js-master/src/js/vendor/jquery-2.1.4.js"></script>


> <script>
>    $.noConflict(true);    
>    var ff = new freezeframe({
>   'selector': 'myclass',
>   'animation_play_duration': 3000,
>   'non_touch_device_trigger_event': 'hover'
> })
> </script>

> <!--<script>$('myclass').freezeframe();></script>-->

commenting out the jquery line still couldn’t get the hover functionality to work also.

Hi @TravisBKlein, I was taking a look at this plugin a little further, and implemented this with the scripts loading in the header, so that should be ok.

Here is the successfully implemented site: https://webflow.com/website/freezeframe-js-example, feel free to clone that.

I put the scripts in the head, and put the code to start the plugin in the Footer. The class for the image is my-class-1. I would suggest to take a look at the usage documentation, a good way to do this, is to open the examples provided, and see how they have used the code.

I hope this helps!

ughhhhh @cyberdave, It was late, sitting here this morning I can’t think of why I didn’t inspect the hell out of that example page to see what my classes should be called.

And I would of noticed I did need the PERIOD before the class. A simple right click inspect of the example page, but I was stupid and didn’t for some unknown reason (super tired, hate to give up when can’t figure something out).

Thank you so much Dave, YOU, ARE, THE, MAN!

Hey @cyberdave, this has been working perfectly for me!

But not when I use TABS in Webflow. The script will only canvas the Active Tab when the page is loaded.

I tried a few things like adding the script on the non active tabs, in Embed code, changing the variable name and made images a new class while changing the script class line of code.

I feel it has to do with how the tabs are displaying and somehow the freezeframe code cannot access or execute on the non active tabs.

I feel I am going to need to hire someone to alter the freezeframe code slightly (maybe the creator).

I guess my question is, should I be letting them know anything tricky or weird about how webflow deals with Tabs, specifically the non active tabs?

Thanks so much Dave!

Edit: https://preview.webflow.com/preview/traviss-supercool-site-1a61fa?preview=81d2edd2ed42ac4fd9ed475b41eec95c
active tab is 2, but image is in tab 1

edit again: I’m thinking it might have to do with the dependency that is responsible for loading the images:

Hi @TravisBKlein, thanks for getting back to me :slight_smile: I believe you are right about the dependencies, the content on the tabs that are set to display none, and this might be one reason the script does not work except for images placed on the active tab. I hope this helps!

Yep @cyberdave, that’s exactly it. The dev even tossed a helping word of advice, that I should make a call to the freezeframe once the new tab is clicked.

I’m not 100% sure about if I did that correctly when I added the script lines in the Embed widget at the top of the inactive tabs.

I think if I did this correctly (maybe changing the variable, or class names of the images?) and freezeframe was called once the tab is clicked, this could work.

What do you think Dave?

Hi @TravisBKlein, yes, that is probably the way to go with this. You should be able to trigger the freezeframe function as a result of a click on some class on the page (i.e. tab link class).

I would have to check it out a little further, but I think that is doable :slight_smile: Might have to play around with it a bit.

p.s. We just implemented the lastest version of jQuery today, so the need to include the vendor jQuery 2.1.4 may have gone away, the script may run now under jQuery 2.2.0. I would try this out and comment out the 2.1.4 jquery line. If jQuery 2.2.0 does not work, there is still the jQuery 2.1.4 that comes with the script.

thanks dave, yep I just got the updated message about 2.2.0, great news. I will test out and see how I can trigger the freezeframe call for the other tabs

@cyberdave , really man thanks so much for helping me, this is a cool thing I wanted to get working, so again Thank you! :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.