Skip to content

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.

License

Notifications You must be signed in to change notification settings

vmeli/freezeframe.js

 
 

Repository files navigation

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 triggered manually.

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

5.x TypeScript beta

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.

To get started using the TypeScript beta:

npm install [email protected]
npm install [email protected]
# react typescript re-write coming soon
# npm install [email protected]

4.x

Version 4+ is built with modern javascript in mind. It's transpiled with webpack/babel, so it should work in most environments, but we are no longer supporting the jquery plugin.

If you want to use freezeframe as a jquery plugin, check out freezeframe v3.0.10.

Packages

This is a lerna.js monorepo, containing the following packages:

Documentation

To get started with freezeframe, head over to the core freezeframe package.

To use freezeframe with Vue.js, check out the vue-freezeframe docs.

React users should give react-freezeframe a try.

How it works

For the curious, we are able to pause animated gifs by writing their data to a canvas element. Only the first frame of the animation can be written to the canvas, so we now have a frozen version of the gif.

Contributing

  • Fork or clone the repository.
  • Install lerna globally (optional)
npm install -g lerna
  • Install the monorepo dependencies
npm install
  • Install the sub-package dependencies
npm run bootstrap
  • Run tests for all sub-packages
npm test
  • Run build for all sub-packages
npm run build
  • If you are part of the ctrl-freaks organization, you can publish directly to npm:
lerna publish

Otherwise, submit your PR for review.

License

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

Thanks

About

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.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 28.5%
  • TypeScript 26.4%
  • HTML 14.9%
  • SCSS 14.4%
  • Vue 13.8%
  • CSS 1.3%
  • Shell 0.7%