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:
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.
<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.
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
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.
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.
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).
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?
Hi @TravisBKlein, thanks for getting back to me 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.
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 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!