Freezeframe-lite NPM

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';