npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

freezeframe

v5.0.2

Published

Freezeframe is a library that automatically pauses animated .gifs and enables them to start animation on mouse hover or click

Downloads

41,644

Readme

Freezeframe.js

npm version Coverage Status Size License: MIT

Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or manually via class methods.

Version 4.x no longer requires or supports jQuery. If you want to use freezeframe as a jQuery plugin, check out freezeframe v3.0.10.

TypeScript

Freezeframe is now built in TypeScript! The library will still support usage in JavaScript, but if your project uses TypeScript, you'll have access to Freezeframe's type definitions, improved input validation, and depending on your IDE/text editor, autocompletion/intellisense.

Examples

http://ctrl-freaks.github.io/freezeframe.js/

Installation

If your project supports ES6 modules or commonjs modules, install via npm or yarn:

npm

npm install freezeframe

yarn

yarn add freezeframe

CDN

If not, you can pull in the library from a CDN:

<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>

Setup

Add freezeframe as a class name on the .gifs you want processed.
( You can optionally use a custom selector as shown in Advanced Usage. )

<img class="freezeframe" src="image.gif" />

It is also possible to put the .freezeframe class on a parent element containing as many gifs as you want:

<div class="freezeframe">
  <img src="image1.gif">
  <img src="image2.gif">
  <img src="image3.gif">
</div>

Usage

If your environment supports commonjs modules (require) or es6 module imports (import), you can import freezeframe like so:

// es/ts modules
import Freezeframe from 'freezeframe';

// or commonjs
const Freezeframe = require('freezeframe');

However, if you are using the CDN version, you can just access the global variable, Freezeframe.

✨ Now time to Freeze those frames ✨

new Freezeframe();

Advanced Usage

freezeframe.js exposes public methods to allow for more custom integration. You have the option of manually controlling when freezeframe triggers images, adds support elements, and attaches event handlers. You can also manually trigger and release animation on one image or a group of images. These methods are described in detail in the Methods section.

Example: trigger logo .gif and manually trigger / release animation:

// setup freezeframe instance with custom selector and options

const logo = new Freezeframe('#logo', {
  trigger: false
});

logo.start(); // start animation
logo.stop(); // stop animation
logo.toggle(); // toggle animation

Options

  • selector

    type: string | Element | HTMLCollectionOf | NodeListOf
    default: ".freezeframe"

    The selector used to search for .gifs to freeze. Selector may either be passed as the first argument of the Freezeframe constructor, or as a property of the options object. You may pass a string selector or a DOM object. If a string is passed, we use querySelectorAll to query for the elements.

  • trigger

    type: string | boolean
    default: "hover"
    options: "hover", "click", false

    The trigger event to start animation for non-touch devices.

  • overlay

    type: boolean
    default: false

    Whether or not to display a play icon on top of the paused image.

  • responsive

    type: boolean
    default: true

    Whether or not to make the image responsive (100% width)

  • warnings

    type: boolean
    default: true

    Whether or not to console.warn if image doesn't appear to be a gif. When using gifs that don't end in .gif, or animated pngs, you may want to disable these.

Constructor

  • Freezeframe(options)

    Create a new freezeframe object instance.
    Can be passed options. Strings will be interpreted as the selector option.

    // Default options
    new Freezeframe();
    
    // String as selector
    new Freezeframe('.foo');
    
    // DOM object as selector
    new Freezeframe(document.querySelector('.foo'));
    
    // Custom options
    new Freezeframe({
      selector: '.foo',
      trigger: 'click',
      overlay: true,
      responsive: false,
      warnings: false
    });
    
    // Also valid syntax
    new Freezeframe('.foo', {
      trigger: 'click',
      overlay: true,
      responsive: false,
      warnings: false
    });

Methods

  • start()

    Start animation, or restarts animation from the first frame if the .gif is already animating.

    // first, save a reference to your freezeframe instance
    
    const ff = new Freezeframe({
      trigger: false
    });
    
    ff.start();
  • stop()

    Stops animation.

    ff.stop();
  • toggle()

    Toggles animation based on its current state.

    ff.toggle();
  • on(event, callback)

    Add event listeners to a freezeframe instance.

    • event

      type: string
      options: start|stop|toggle

    • callback

      type: function
      params:

      • items: array<freezeframe> | freezeframe
      • isPlaying: boolean

    For example:

    ff.on('start', (items) => {
      // do something on start
    };
    
    ff.on('stop', (items) => {
      // do something on stop
    };
    
    ff.on('toggle', (items, isPlaying) => {
      if (isPlaying) {
        // do something on start
      } else {
        // do something on stop
      }
    };

    And in TypeScript:

    import { Freeze } from 'freezeframe/types';
      
    ff.on('start', (items: Freeze[]) => {
      // do something on start
    };
    
    ff.on('stop', (items: Freeze[]) => {
      // do something on stop
    };
    
    ff.on('toggle', (items: Freeze[], isPlaying: boolean) => {
      if (isPlaying) {
        // do something on start
      } else {
        // do something on stop
      }
    };
  • destroy()

    Removes all event listeners, but leaves DOM intact.

    Use if you are concerned about memory leaks on your event listeners.

    ff.destroy();

Contributing

Assuming you have already read the instructions in the project root:

  • First, cd into the appropriate package directory
# start webpack dev server
npm start
# build the project and examples for gh-pages
npm run build
# run unit tests
npm test

Then commit your changes and submit your PR for review.

License

freezeframe.js is released under the terms of the MIT License.

Thanks