FreezeFrame.js for Gifs, Help

@TravisBKlein wrote:

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: http://ctrl-freaks.github.io/freezeframe.js/

The github page:
https://github.com/ctrl-freaks/freezeframe.js

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

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)

Posts: 7

Participants: 2

Read full topic