Lawrence  Lesch

Lawrence Lesch


A Library That Pauses animated .gifs & Enables Them to Animate


Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

v5 - TypeScript

Freezeframe is now written in / supports 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 freezeframe 5:

npm install freezeframe
npm install vue-freezeframe
npm install react-freezeframe
npm install angular-freezeframe

Version 5+ is built with modern development in mind. It's transpiled from TypeScript to JavaScript, and it should work in all modern browsers, but we are no longer supporting older browsers, or the jquery plugin.

If you need to support older browsers (and don't need TypeScript), try v4.x:

npm install freezeframe@4.1.3

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

Packages / Documentation

This is a lerna.js monorepo, containing the following packages, each with their own docs:

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.

Unfortunately, browser security prevents reading the actual data of the image if it is hosted on a different domain, which prevents us from being able to truly "pause" the gif on the true current frame. Supporting gifs on other domains is a requirement for this project, so the only frame you can pause on is the first frame.


  • 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

Then, submit your PR for review.


Download Details:

Author: ctrl-freaks
Source Code: 
License: MIT license

#typescript #javascript #react #gif #vue 

A Library That Pauses animated .gifs & Enables Them to Animate
Reid  Rohan

Reid Rohan


Gifuct-js: Fastest Javascript .GIF Decoder/parser


A Simple to use javascript .GIF decoder.

We needed to be able to efficiently load and manipulate GIF files for the Ruffle hybrid app (for mobiles). There are a couple of example libraries out there like jsgif & its derivative libgif-js, however these are admittedly inefficient, and a mess. After pulling our hair out trying to understand the ancient, mystic gif format (hence the project name), we decided to just roll our own. This library also removes any specific drawing code, and simply parses, and decompresses gif files so that you can manipulate and display them however you like. We do include imageData patch construction though to get you most of the way there.


You can see a demo of this library in action here



npm install gifuct-js


This decoder uses js-binary-schema-parser to parse the gif files (you can examine the schema in the source). This means the gif file must firstly be converted into a Uint8Array buffer in order to decode it. Some examples:


  import { parseGIF, decompressFrames } from 'gifuct-js'

  var promisedGif = fetch(gifURL)
       .then(resp => resp.arrayBuffer())
       .then(buff => {
           var gif = parseGIF(buff)
           var frames = decompressFrames(gif, true)
           return gif;


  import { parseGIF, decompressFrames } from 'gifuct-js'

  var oReq = new XMLHttpRequest();"GET", gifURL, true);
  oReq.responseType = "arraybuffer";

  oReq.onload = function (oEvent) {
      var arrayBuffer = oReq.response; // Note: not oReq.responseText
      if (arrayBuffer) {
          var gif = parseGIF(arrayBuffer);
          var frames = decompressFrames(gif, true);
          // do something with the frame data



The result of the decompressFrames(gif, buildPatch) function returns an array of all the GIF image frames, and their meta data. Here is a an example frame:

    // The color table lookup index for each pixel
    pixels: [...],
    // the dimensions of the gif frame (see disposal method)
    dims: {
        top: 0,
        left: 10,
        width: 100,
        height: 50
    // the time in milliseconds that this frame should be shown
    delay: 50,
    // the disposal method (see below)
    disposalType: 1,
    // an array of colors that the pixel data points to
    colorTable: [...],
    // An optional color index that represents transparency (see below)
    transparentIndex: 33,
    // Uint8ClampedArray color converted patch information for drawing
    patch: [...]

Automatic Patch Generation:

If the buildPatch param of the dcompressFrames() function is true, the parser will not only return the parsed and decompressed gif frames, but will also create canvas ready Uint8ClampedArray arrays of each gif frame image, so that they can easily be drawn using ctx.putImageData() for example. This requirement is common, however it was made optional because it makes assumptions about transparency. The demo makes use of this option.

Disposal Method:

The pixel data is stored as a list of indexes for each pixel. These each point to a value in the colorTable array, which contain the color that each pixel should be drawn. Each frame of the gif may not be the full size, but instead a patch that needs to be drawn over a particular location. The disposalType defines how that patch should be drawn over the gif canvas. In most cases, that value will be 1, indicating that the gif frame should be simply drawn over the existing gif canvas without altering any pixels outside the frames patch dimensions. More can be read about this here.


If a transparentIndex is defined for a frame, it means that any pixel within the pixel data that matches this index should not be drawn. When drawing the patch using canvas, this means setting the alpha value for this pixel to 0.

Drawing the GIF

Check out the demo for an example of how to draw/manipulate a gif using this library. We wanted the library to be drawing agnostic to allow users to do what they wish with the raw gif data, rather than impose a method that has to be altered. On this note however, we provide an easy interface for creating commonly used canvas pixel data for drawing ease.

Thanks to

We underestimated the convolutedness of the GIF format, so this library couldn't have been made without the help of:

Who are we?

Matt Way & Nick Drewe

Download Details:

Author: Matt-way
Source Code: 
License: MIT license

#javascript #decode #gif 

Gifuct-js: Fastest Javascript .GIF Decoder/parser
Lawrence  Lesch

Lawrence Lesch


Animated_GIF: Javascript Library for Creating Animated GIFs


A Javascript library for creating animated GIFs

How to use it?

Include dist/Animated_GIF.js in your HTML.

var imgs = document.querySelectorAll('img');

var ag = new Animated_GIF(); 
ag.setSize(320, 240);

for(var i = 0; i < imgs.length; i++) {
    ag.addFrame(imgs[i], { delay: 1000 });

var animatedImage = document.createElement('img');

// This is asynchronous, rendered with WebWorkers
ag.getBase64GIF(function(image) {
    animatedImage.src = image;

If you instance lots of Animated_GIF objects, it's strongly recommended that you call their destroy method once you're done rendering the GIFs, as browsers don't seem to be happy otherwise. See the stress test for an example of this in use!

Minified versions

There's a minified version in dist/: dist/Animated_GIF.min.js.

Using from npm

You can also use this via npm.

To install:

npm install --save animated_gif

To use:

var Animated_GIF = require('animated_gif');

// And then the examples are as before
var ag = new Animated_GIF(); 
ag.setSize(320, 240);

// ... etc

Available options

Pass an object with the desired values when creating an Animated_GIF instance:

  • sampleInterval: how many pixels to skip when creating the palette. Default is 10. Less is better, but slower.
  • numWorkers: how many web workers to use. Default is 2.
  • useQuantizer: this is true by default, and provides the highest quality results, at the cost of slower processing and bigger files. When this is enabled, a neural network quantizer will be used to find the best palette for each frame. No dithering is available in this case, as the colours are chosen with the quantizer too.
  • dithering: selects how to best spread the error in colour mapping, to conceal the fact that we're using a palette and not true color. Note that using this option automatically disables the aforementioned quantizer. Best results if you pass in a palette, but if not we'll create one using the colours in the first frame. Possible options:
    • bayer: creates a somewhat nice and retro 'x' hatched pattern
    • floyd: creates another somewhat retro look where error is spread, using the Floyd-Steinberg algorithm
    • closest: actually no dithering, just picks the closest colour from the palette per each pixel
  • palette: An array of integers containing a palette. E.g. [ 0xFF0000, 0x00FF00, 0x0000FF, 0x000000 ] contains red, green, blue and black. The length of a palette must be a power of 2, and contain between 2 and 256 colours.

addFrame options

  • delay: set frame delay. Default is Animated_GIF instance delay.

Tests and examples

Check the files in the tests folder:

Start the server from the root folder (e.g. Animated_GIF). One way of doing it is using the simple Python web server:

python -m SimpleHTTPServer

starts a server in http://localhost:8000. So you can now go to http://localhost:8000/tests/ and see the available examples.

Contributing / walkthrough

Here's a quick walkthrough of each of the files in src/ and what they do:

  • Animated_GIF.js - definition of the Animated_GIF class. Holds the logic for the queueing and rendering of the files, and parsing config options.
  • Animated_GIF.worker.js - code for the web worker that color-indexes frames in the background, using node-dithering and NeuQuant.js. This is bundled in dist/Animated_GIF.js, using workerify.
  • main.js - stub in order to export the library using Browserify (you won't generally need to touch this one)

External / included libraries --see Credits for more information on these. You generally don't want to touch these because it will make very difficult to track updates in those libraries:

  • lib/NeuQuant.js - color quantizer based on a neural network algorithm, this is an external library
  • omggif.js - GIF89 encoder/decoder
  • node-dithering - class with three different types of dithering algorithms

Rebuild dist files

If you made changes in the library, you'll need to rebuild the files in dist/ in order to see the changes working. We have a node.js-based script to regenerate those files.

Once node.js is installed in your system, do:

cd Animated_GIF     # or however you cloned the library to
npm install         # this pulls dependencies for building (uglify, browserify)
npm run build       # and this actually builds

Once you do the initial two steps you just need to execute npm run build whenever you change things and want to rebuild the files in dist/. Or you can also use npm run watch to have it build the library automatically.


We're using these fantastic libraries to do GIF stuff:

  • Anthony Dekker's NeuQuant image quantization algorithm which was ported from C into Java by Kevin Weiner and then to ActionScript 3 by Thibault Imbert, and to JavaScript by antimatter15, and fixed, patched and revised by sole.
  • Dean McNamee's omggif library - for actually encoding into GIF89
  • sole's node-dithering.

And then, to build the dist files

  • node.js
  • uglify
  • browserify

Download Details:

Author: Sole
Source Code: 

#javascript #gif 

Animated_GIF: Javascript Library for Creating Animated GIFs
Nat  Grady

Nat Grady


GIFBar: A System Tray icon That Helps You Find The Perfect GIF


A system tray icon that helps you find the perfect GIF


Current Release


Made with Electron.

Initnpm install
Runnpm start
Buildnpm run build

Author: Dcrousso
Source Code: 
License: MIT license

#electron #mac #gif #javascript 

GIFBar: A System Tray icon That Helps You Find The Perfect GIF

Gifgen: Simple High Quality GIF Encoding


Simple high quality GIF encoding

If you've ever tried encoding GIFs with ffmpeg there's a good chance your results came out looking pretty bad. This is because GIFs are limited to a palette of 256 colours and ffmpeg just uses a generic palette to be able to cover a wide range of colours.

gifgen produces much better results by doing a 2-pass encode. The first pass generates a custom colour palette based on all of the pixels from each frame. The second pass encodes the GIF using this palette instead of the default one bundled with ffmpeg.

ffmpeg default:

ffmpeg default




$ gifgen -h
gifgen 1.2.0

Usage: gifgen [options] [input]

  -o   Output file [input.gif]
  -f   Frames per second [10]
  -s   Optimize for static background
  -v   Display verbose output from ffmpeg
  -w   Scale output with horizontal resolution
  -b   Begin the clip at a given timestamp (in seconds)
  -d   Duration in seconds of the resulting gif, can be combined with at

  $ gifgen video.mp4
  $ gifgen -o demo.gif SCM_1457.mp4
  $ gifgen -sf 15
  $ gifgen -sf 15 -w 320

Begin at 3.5 seconds into the video, make the gif using the next 5.5 seconds
  $ gifgen -b 3.5 -d 5.5



brew install lukechilds/tap/gifgen


Just clone this repo and either copy/symlink gifgen to your PATH or run the script directly with ./gifgen. Requires ffmpeg to be installed.




gifgen is pretty much just the information from this blog article wrapped up in a shell script. Full credit goes to the original author.

Author: lukechilds
Source Code: 
License: MIT License

#node #npm #gif 

Gifgen: Simple High Quality GIF Encoding
坂本  篤司

坂本 篤司


画像ファイルの種類– .jpeg、.svg、および.png画像形式の拡張子の説明














ちなみに、JPEGはJoint Photographic Experts Groupの略で、標準を開発したチームです。























The Tonight Showの世論調査では、5,767人の回答者の73.7%が、GIFを「gift」のように「gif」と発音したと答えています。









これは、 MozillaDeveloperNetworkのSVGファイルの例です。これは、SVGがネイティブXMLコード形式でどのように見えるかです。

<svg version="1.1"
     width="300" height="200"

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>







JPEGとPNG– Webに最適な画像形式はどれですか?






ソース:https ://

#svg #jpeg #gif #image 

画像ファイルの種類– .jpeg、.svg、および.png画像形式の拡張子の説明
Diego  Elizondo

Diego Elizondo


Explicación De Las Extensiones De Formato De Imagen .Jpeg, .Svg Y .Png

Cuando trabaja con imágenes, es importante comprender los diferentes tipos de archivos. ¿Qué formato es mejor para qué aplicación?

En este tutorial, explicaremos los tipos de archivos de imagen más comunes y cuándo debe usarlos.

Tenga en cuenta que este es un artículo breve y no técnico. Si desea profundizar mucho más en el aspecto del rendimiento, lea estas guías sobre cómo optimizar las imágenes de su sitio web para la web .

Primero, una explicación rápida de cómo funciona la compresión de imágenes.

Lossless vs Lossy: ¿cuál es la diferencia entre estos dos tipos de compresión?

La compresión sin pérdidas es una clase de algoritmos de compresión de datos que permite reconstruir perfectamente los datos originales a partir de los datos comprimidos.

Hay tanto que puede comprimir un archivo antes de comenzar a desechar parte de la información que contiene el archivo.

Aquí es donde entra en juego la compresión "Lossy". Con pérdida, ya que pierde parte de la información.

La compresión con pérdida permite la reconstrucción solo de una aproximación de los datos originales (aunque generalmente con tasas de compresión muy mejoradas).

Verá que los términos "Lossless" y "Lossy" aparecen a continuación cuando describimos diferentes formatos de archivo de imagen.

¿Qué es el formato JPEG? (Extensión de archivo .jpg y .jpeg)

JPEG es el tipo de archivo más común para las imágenes. Se utiliza mejor para fotos y otras imágenes con muchos colores.

El formato JPEG es un "formato de compresión con pérdida" para imágenes digitales. Eso significa que pierde algo de la

Por cierto, JPEG significa Joint Photographic Experts Group, el equipo que desarrolló el estándar.

Los archivos JPEG son más pequeños que otros tipos de archivos, por lo que son fáciles de descargar y compartir.

¿Los archivos JPEG pueden ser transparentes o tener un fondo transparente?

No. A diferencia de los GIF, SVG y PNG, los archivos JPEG no pueden tener fondos transparentes. Necesitará convertir su JPEG a un formato de archivo diferente.

¿Son lo mismo .jpeg y .jpg?

Sí, la única diferencia es que, tradicionalmente, las extensiones de archivo tienen solo 3 caracteres. ".jpg" es una forma abreviada de ".jpeg".

¿Qué es un PNG? El formato de archivo PNG (extensión de archivo .png)

PNG es un formato de compresión sin pérdidas para imágenes digitales. PNG se creó como un reemplazo mejorado para GIF. Se ha convertido en el formato de compresión de imágenes sin pérdidas más utilizado en la web.

PNG es un tipo de archivo que se usa mejor para imágenes con transparencia, como logotipos. Los archivos PNG suelen ser más grandes que los JPEG, por lo que no son ideales para imágenes grandes.

Los PNG pueden tener un fondo transparente.

¿Qué es un GIF? El formato de imagen GIF (extensión de archivo .gif)

El formato GIF es otro tipo de archivo de imagen que se usa comúnmente en la web. Los archivos GIF suelen ser más pequeños que otros tipos de archivos de imagen, lo que los hace ideales para usar en la web.

Los GIF se pueden usar para imágenes estáticas. Pero se asocian más comúnmente con animaciones, una serie de imágenes que se reproducen automáticamente. Por ejemplo, aquí hay un GIF de dominio público.

globo terráqueo

Un GIF de dominio público del globo giratorio

Esto es realmente solo una serie de una docena de imágenes que se reproducen en un bucle.

Tenga en cuenta que los GIF también pueden tener un fondo transparente.

¿Cómo se pronuncia GIF?

El creador del formato GIF, Stephen Wilhite, dijo que pronunciaba "jif" como "Jif" mantequilla de maní.


Mantequilla de maní Jif. Foto de Creative Commons por Brian Cantoni.

Dicho esto, casi todos los desarrolladores que conozco lo pronuncian "gif", como en "regalo", y creo que seguirá siendo la forma más popular de decirlo.


Una encuesta de The Tonight Show donde el 73,7% de los 5.767 encuestados dijeron que pronunciaban GIF como "gif" como en "regalo".

¿Qué es un TIFF? El formato de imagen TIFF (formato de archivo .tif)

TIFF es un tipo de archivo que es mejor usar para imágenes de alta calidad que necesitan ser editadas. Los archivos TIFF son grandes, por lo que no son ideales para compartir en línea.

Debe usar un TIFF cuando la calidad es más importante que el tamaño del archivo. En la práctica, un PNG es casi siempre una mejor opción, especialmente cuando se trata de imágenes en la web.

¿Qué es un SVG? El formato de archivo SVG (extensión de archivo .svg)

Un SVG es un gráfico vectorial escalable. Esto significa que el gráfico se puede escalar a cualquier tamaño sin perder calidad.

A diferencia de todos los demás formatos de archivo que analizamos en este artículo, los archivos SVG son archivos vectoriales. (JPEG, PNG, GIF y TIFF son archivos de trama).

Esto significa que los archivos SVG se pueden escalar a cualquier tamaño sin perder calidad, mientras que los archivos raster perderán calidad cuando se amplíen.

Puede editar archivos SVG utilizando un software de edición de vectores (o simplemente actualizar manualmente las coordenadas y los colores de los gráficos). Solo puede editar archivos PNG utilizando un software de edición de tramas.

Aquí hay un archivo SVG de ejemplo de Mozilla Developer Network . Así es como se ve SVG en su forma de código XML nativo:

<svg version="1.1"
     width="300" height="200"

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>


Y este código simple representa esta imagen:


Un cuadrado rojo con un punto verde y las letras "SVG" en él.

Los archivos SVG suelen ser más pequeños que los archivos PNG, porque solo contienen los datos necesarios para dibujar la imagen, mientras que los archivos PNG contienen los datos de toda la imagen.

También puede animar archivos SVG usando una herramienta llamada SMIL. Por lo tanto, pueden servir como archivos GIF extremadamente eficientes en el espacio. Y si eres realmente aventurero, puedes programar SVG.

JPEG VS PNG: ¿Qué formato de imagen es mejor para la Web?

La web puede verse muy diferente en el futuro, a medida que implementemos más y más cable de fibra óptica y el Internet satelital de alta velocidad se vuelva más común.

Pero por ahora, mi recomendación es usar archivos JPEG para la mayoría de sus imágenes.

Si tienes el logo de una empresa o una foto muy importante donde la calidad es vital, PNG es una buena opción.

Para los logotipos, recomiendo usar un SVG, ya que se escalará infinitamente y tiene un tamaño muy compacto.

Espero que hayas aprendido mucho sobre los tipos de archivos de imagen.


#svg #jpeg #gif #image 

Explicación De Las Extensiones De Formato De Imagen .Jpeg, .Svg Y .Png
Sherman  Zemlak

Sherman Zemlak


Making Animated GIF Fireworks CS5

Learn how to make a moving animated GIF in Fireworks CS5. Animated pictures can look really good on your website and this is why we are learning how to make them.

Don’t forget to Subscribe here:

#cs5 #gif #fireworks

Making Animated GIF Fireworks CS5

Sherif Ezzat


Play GIF On Hover | Animate GIF on hover | How To Animate GIF On Hover In CSS

This video on Play GIF On Hover | Animate GIF on hover | How To Animate GIF On Hover In CSS

Related contents
➤ gif animation in CSS
➤ play gif on hover codepen
➤ css animation

Download Code From Here:


#css #gif

Play GIF On Hover | Animate GIF on hover | How To Animate GIF On Hover In CSS

Aman Agrawal


Loading spinner using CSS

Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy resolution. What if you can create a gif(ish) element out of CSS? Because you can.

CSS has come a long way we can now create our own GIF-ish contents and the best part, we have full control over it.

Read this blog to learn more

#css #loader #gif #programming #coding #engineering

Loading spinner using CSS

Rahul Bhardwaj


Build a GIF Application using React Custom Hooks | Optimize Your React Apps

Custom Hooks in React are useful for much more than just managing the local state. They provide a new layer of abstraction to accomplish new and amazing patterns. In this video, I’m going to teach you how to use custom hooks to build a GIF Application.

GitHub Repository:

CSS code and URLs:

Subscribe :

#react #gif #react-hooks

Build a GIF Application using React Custom Hooks | Optimize Your React Apps

6 Easy Steps to Make Animated GIFs for Short Tutorials

Most tutorials nowadays contain many visuals to grab the reader’s attention and explain how to better solve different problems. Specifically, I found that GIFs are a very good tool for presenting GUIs. In this article, I will show you how to make animated GIFs that can be used alongside text to create faster and better demos.

#tech #animation #gif #web-development #user-experience

6 Easy Steps to Make Animated GIFs for Short Tutorials

How to render your Tableau Viz as a GIF file


This article will show you two simple and quick steps you can take to make a GIF file out of an already dynamic Tableau visualization.

Nowadays, the proliferation of dynamic and effective data communication is also seeing charts being more and more prone to being communicated in an interactive way that is aligned with the type of digital media most people communicate with. GIFs are definitely a trend in this regard, and they can be potentially very effective when it comes to augmenting the degree of interactivity of your data charts and the way you present them to your relevant audience.

Therefore, I will walk you through a brief example on how to turn a Tableau chart into a GIF file, which can be then shared via reports/presentations to add a touch of interactivity to whatever content you will be sharing with your network.

Step 1: Generate Dynamic Tableau Chart

The objective of this chart is to examine the correlation of income inequality, as estimated by the Gini coefficient, and a country’s total Covid-19 cases per one million inhabitants (data sources can be found at the top of the page), and see how the correlation appears to be developing over time. To do this, you are going to make use of two datasets and of Tableau’s Pages Shelf to add the first element of interactivity into our chart.

As a first thing, you can input the two data sources necessary for this example and join them using Tableau’s data source tab, as shown in the below image. You can use the “Country column” on the Gini coefficient table to perform a left join with the second data source, as to get you to a single table which features both the Gini coefficient and Covid-19 related columns (number of cases, tests, etc by date).

#gif #tableau #data-visualization #data visualization

How to render your Tableau Viz as a GIF file

Show GIF inside your App | Android Studio

How to add gif inside android app.

#android studio #gif

Show GIF inside your App | Android Studio
Louie Sanders

Louie Sanders


Create gif from Facebook Sticker

Even though the Facebook and Messenger apps are bad, they have really cute stickers 🤪. But you try to download, there is no way to download as a gif file file. Anyway, it appears already, there is no way to download. Try inspecting the element, we will see it appears to be a spritesheet set background-imageand used background-positionto change the frame.


This is the spritesheet.


So now we will do like this:

  1. Get the frames from spritesheet
  2. Merge into file gif

Split frames from spritesheet

Looking at the spritesheet up there, you can see that it has 8 frames, each size 288px * 288px. You can manually cut it out by any app. Or we will write a script to cut out. We will use the Canvas API to render frames from spritesheet.

Suppose we have a spritesheet loaded on a page like this

<img id="spritesheet" src="">

To cut out each frame, we will create a canvas with the size 288px * 288pxand render the corresponding part on the sprite sheet onto that canvas. For example, to cut the first frame, we do like this

const spritesheet = document.getElementById('spritesheet');

const canvas = document.createElement('canvas');
canvas.width = 288;
canvas.height = 288;

const ctx = canvas.getContext('2d');
ctx.drawImage(spritesheet, 0, 0, 288, 288, 0, 0);


You should see the first frame like this


The 2nd and 3rd parameters of drawImagewill be the position of the frame on the spritesheet. Document details here .

To cut all the frames, we make a loop like this

const frames = [];

while (y < spritesheet.height) {
    x = 0;

    while (x < spritesheet.width) {
        const canvas = document.createElement('canvas');
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(spritesheet, x, y, 288, 288, 0, 0);

        const isEmpty = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data.every(channel => channel === 0);

        if (!isEmpty) {

        x += originalWidth;

    y += originalHeight;

You will see that we have left a last empty frame empty, so I have to add a check to see if the frame we just cut has data before adding it to the array frames. Simply check whether all its pixels have data or not.

const isEmpty = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data.every(channel => channel === 0);

Merge frames into GIF image

If I have frames then I can stitch them together. I will use the package [gif.js]( create gif images. Creating images from frames is as simple as this.

const fps = 8;

const gif = new GIF({
    workers: 2,
    quality: 1,

frames.forEach(frame => gif.addFrame(frame, {
    delay: 1000 / fps,

gif.on('finished', (blob) => {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.setAttribute('src', url);


Just add the frames and the delay between frames then render. To make it easy to calculate, we use the concept of frame rate, often the Facebook stickers I see have frame rate from 8-12 fps. The result will be raw data so we can use URL.createObjectURLto create a temporary URL. Our result is like this.


It’s okay, except for the black background ra. This is because our image is partially transparent, so the gif is rendered. If add options transparentfor gif.jslike this

const gif = new GIF({
    workers: 2,
    quality: 1,
    transparent: 'rgba(0, 0, 0, 0)',

Then we get results like this.


There is a transparent background but the contours are not very good. This is due to format limitations GIF. Normally, with a transparent image such as PNG, the transition from the image to the transparent place will be a lot of pixels with reduced transparency like this to make the border of the image smooth.


However, with the GIF format, each px can only be colored or completely transparent, not half transparent like PNG. So the contour looks like a low-quality serrated pattern. So a gif that has a transparent background usually has a small white border (or something similar to the background where people plan to put the gif on) to make the border look smoother. For simplicity, I will give the white background as well.

ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);

Remember to color before drawImageit will overlap the image. Our result is like this.


This is the whole code if you want to play with it.

Link codepen if the embed doesn’t load 😔


Regarding how Facebook works, why use a spritesheet without using a GIF image. Doing this also has some benefits.

  • Better photos, GIF images have 256 colors instead of 16 million colors like PNG.
  • No problem with transparent as I mentioned above anymore.
  • No need to be copied (may be 🤔).

But there must also be some that are not beneficial

  • No resizing. Because used background-imageand background-positionso the sticker size is fixed, want to change spritesheet to change.
  • Running RAM with CPU 🙄.

#gif #programming

Create gif from Facebook Sticker