freezeframe-lite

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