freezeframe-lite

A lighter-weight version of freezeframe.js

Usage no npm install needed!

<script type="module">
  import freezeframeLite from 'https://cdn.skypack.dev/freezeframe-lite';
</script>

README

freezeframe-lite

NPM Install Size

A version of freezeframe.js, in a 75% smaller bundle (16 KB vs 66 KB) and with fewer features. Motivated by a feature request during Hacktoberfest 2019.

React Codesandbox Demo

Supported

  • Animate a single GIF when hovered over.
    • Achieves this by overlaying the GIF with a canvas populated an image of the first frame.
  • A hooks-based React wrapper
    • TODO: tear down event listeners when component is unmounted

Not Supported

Features intentionally removed from the main freezeframe.js library for smaller size

  • Support putting multiple images inside parent element
  • Validate that all pictures are GIFs
  • Manually triggering image start/stop without actual hovering
  • Trigger animation via click instead of hover
  • No overlays or play icons

Installation

yarn add freezeframe-lite
npm install freezeframe-lite

By default, an ES6 module is exported.

// import ES6 Module
import FreezeframeLite from 'freezeframe-lite';

// Import non-ES6 Module
import FreezeframeLite from 'freezeframe-lite/dist/freezeframe-lite.min';

// React Wrapper
import FreezeframeWrapper from 'freezeframe-lite/examples/FreezeframeWrapper';

Development

  1. Clone repository
  2. yarn install
  3. Modify contents of src/ folder