Gif-library

A lightweight and accessible JavaScript library to toggle GIF Play/Pause with a button overlay.
Supports ES Modules and CDN usage.

Installation

NPM

npm install gif-library

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gifLibrary.umd.js"></script>

Usage

ES Module

import gifPlay from "gif-library";

gifPlay(".myGif", "image-still.png", {
  gifAlt: "GIF is playing",
  stillAlt: "GIF is paused",
});

CDN (UMD)

<img src="demo.gif" class="myGif" />

<script>
  GifLibrary(".myGif", "demo.png");
</script>

Function Signature

gifPlay(selector, stillImage, altText);

| Parameter | Type | Required | Description | | ---------- | ------ | -------- | --------------------------------- | | selector | string | Yes | Target image selector | | stillImage | string | Yes | Paused-state PNG/JPG | | altText | object | No | Custom alt text for accessibility |

Alt text example

gifPlay(".myGif", "still.png", {
  gifAlt: "Animation playing",
  stillAlt: "Animation paused",
});

Features

• Pure JavaScript — no dependencies
• Accessible play/pause button
• Auto-loads FontAwesome icons
• Dynamic aria-label, alt, and aria-pressed
• Clean API (CDN + import support)
• Works with any GIF

Optional CSS Customization

.gif-toggle-btn {
  background: #000;
  border-radius: 6px;
}

License

MIT