Awesome GIF 😎

A curated list of awesome GIF resources

Contents · Use · Authors · License & Credits

This is a list of tools, scripts, libraries, examples & other resources related to the Graphics Interchange Format (GIF) image format.

General Tools
Utilities
Libraries
- ActionScript
- C++
- C#
- Haxe
- Java
- JavaScript
- PHP
- Objective-C
- Swift
GUI
Hosting
Online Tools
Community
Niche
Scripts
Miscellaneous

General Tools

FFmpeg
ImageMagick
GraphicsMagick - GraphicsMagick is usually faster than ImageMagick
MoviePy - Python module for video editing

Utilities

Gifgen - Simple high quality GIF encoding
Gifify - Convert any video file to an optimized animated GIF
Gifify (not the same) - convert screen recording into GIF
Gifsicle - lossy GIF compressor
Gifs - storage place for GIFs
Gifshot - create animated GIFs from media by Yahoo - demo
Gifsockets - Real Time communication library using Animated GIFs as a transport
X-gif - a web component for flexible GIF playback
gifme - generate animated GIFs
GifW00t - javascript web recorder
gif-machine - GIF creation from Youtube videos
gifstreaming - Live video streaming server
Screengif - Create animated GIF screencasts
vnc-over-gif - Serves screen updates as animated GIF over http
gifdeck - Convert your SlideShares into animated GIFs
Gifbot - GIF search for Slack
Gif-camera - create animated GIFs using webcam
Gifline - Chrome extension to put GIFs in your emails
Gifdrop - Create a repository for your collection of gif images
Gh-gif - NodeGH plugin for commenting on pull requests/issues using GIF reactions
Tty2gif - record scripts and their outputs into both binary and GIF formats
Giftoppr - Sync your favourite GIFs with Dropbox
Gifit - Chrome extension to make a GIF from a YouTube video
Ccapture.js - Capture animations created with HTML5 canvas
Kap - Beautiful open-source app to capture your screen and export to GIF.
Gifit (the other one) - Get a search resulting giphy GIF in markdown in stdout, ala $ gifit kittens.
gifski - High-quality GIF encoder based on libimagequant.

Libraries

ActionScript

Flash Animated GIF Library - AS3 library for playing Animated GIFs in Flash

C++

Node-gif - C++ library to make GIF
Gif-h - C++ one-header library for the creation of animated GIFs
OfxGifEncoder - C++ openframeworks addon to export animated GIFs

C#

dot-screencap - A simple libary to record your screen and save it as animated GIF
WpfAnimatedGif - A simple library to display animated GIF images in WPF
XamlAnimatedGif - A simple library to display animated GIF images in XAML apps (WPF, WinRT, Windows Phone)
AnimatedGif - A high performance .NET library for reading and creating animated GIFs

Haxe

Gif - Haxe GIF encoder

Java

Android-gif-drawable - Views and Drawable for displaying animated GIFs on Android
gifanimateddrawable - Use an animated GIF as an Android Drawable
GifView - android library to deal with GIF
Gif Movie View - Android View widget for displaying GIF animations
GifImageView - Android ImageView that handles animated GIF images
Gif-animation - Processing library to play and export GIF
Android-gif-encoder - animated GIF encoder for Android
GIFDroid - Android video to GIF converter
Android-GifStitch - create and share animated GIFs

JavaScript

Gif.js - Javascript - create GIF from the DOM
Omggif - Javascript - GIF 89a encoder and decoder
Animated_GIF - Javascript library for creating animated GIFs
Gifffer JavaScript library that prevents the autoplaying of the animated GIFs
Gifplayer - jquery plugin to play and stop animated GIFs
Jsgif - JavaScript GIF parser and player
node-gify - Javascript convert videos to GIFs using ffmpeg and gifsicle
Gifencoder - Server side animated GIF generation for node.js
Gif-video - Javascript Convert a GIF image into an HTML5-ready video
Gif-player - On-demand GIF loader/player in Javascript
GifgifLab-face - Facial-emotion detectors
node-youtube - Youtube to snapshots and GIFs.

PHP

GifCreator - PHP class that creates animated GIF from multiple images
Spacer.gif - PHP script offering spacer.gif 1x1
GifFrameExtractor - PHP class that separates all the frames of an animated GIF

Objective-C

AnimatedGIFImageSerialization - decodes an UIImage from Animated GIFs image data
UIimage from GIF - UIImage category that loads animated GIFs
GIFRefreshControl - "Twitter music" and "Yahoo! Weather" like pull-to-refresh control
UIImageView-PlayGIF - UIImageView category/subclass for playing GIF
FLAnimatedImage - Gif engine for iOS by FlipBoard
Animated-GIF-iPhone - Support for Animated GIF on iOS
UzysAnimatedGifPullToRefresh - PullToRefresh using animated GIF to any scrollView
SvGifView - iOS load and display GIF
GifHUD - iOS progress hud for displaying only animated GIF images
Video-Background GIF - iOS Video Background GIF
AnimatedGifExample - iOS animated and transparent GIFs
OLImageView - iOS OLImage and OLImageView support for animated GIFs

Swift

[SwiftyGif] (https://github.com/kirualex/SwiftyGif) - High performance & easy to use Gif engine
Gifu - animated GIF support for iOS in Swift
SwiftGif - UIImage extension with GIF support

GUI

Glyph - tool for generating seamlessly looping GIFs and cinemagraphs from videos
Qgifer
GIFs - Mac App for finding GIFs
VineGifR - Mac app to turn Vine videos into GIFs
GifPro - GIF encoder for Mac
AnimatedGif - Mac Screensaver for playing GIFs

Hosting

Gfycat - Maximum GIF/video length: 15 seconds. Maximum file upload is 300Mb
Imgur - Maximum file upload is 50MB

Online Tools

Vid2gif - Video to GIF by imgur
EzGif - Online GIF maker and image editor
Giflr - A web app for making or remixing animated GIFs
Gif.gf - Provide a matching GIF for your face

Community

Niche

Starwars-dot-gif - Python script to generate GIFs from star wars

Scripts

Frames to GIF

FFmpeg

ffmpeg -f image2 -i image%d.jpg animated.gif

Imagemagick

convert   -delay 20   -loop 0   frames*.png   animated.gif

Bash script (frames2gif.sh) for GraphicsMagick, ImageMagick, FFmpeg

#!/bin/bash
if [ $# -ne 5 ]; then
    echo "please provide the moviename and directory where to store the frames"
    echo "./frames2gif.sh [directory] [movie.mp4] [filename.gif] [gm|im|ffmpeg] [png|jpg]"
    exit 1
fi
    if [ "png" == "$5" ]; then
        suffix="png"
    else
        suffix="jpg"
    fi
CONVERT=<span class="pl-s"><span class="pl-pds">$(</span>which convert<span class="pl-pds">)</span></span>
GM=<span class="pl-s"><span class="pl-pds">$(</span>which gm<span class="pl-pds">)</span></span>
FFMPEG=<span class="pl-s"><span class="pl-pds">$(</span>which ffmpeg<span class="pl-pds">)</span></span>
FFPROBE=<span class="pl-s"><span class="pl-pds">$(</span>which ffprobe<span class="pl-pds">)</span></span>
FPS=<span class="pl-s"><span class="pl-pds">$(</span><span class="pl-smi">$FFPROBE</span> -show_streams -select_streams v -i <span class="pl-s"><span class="pl-pds">"</span><span class="pl-smi">$2</span><span class="pl-pds">"</span></span>  <span class="pl-k">2&gt;</span>/dev/null <span class="pl-k">|</span> grep <span class="pl-s"><span class="pl-pds">"</span>r_frame_rate<span class="pl-pds">"</span></span> <span class="pl-k">|</span> cut -d<span class="pl-s"><span class="pl-pds">'</span>=<span class="pl-pds">'</span></span> -f2 <span class="pl-k">|</span> cut -d<span class="pl-s"><span class="pl-pds">'</span>/<span class="pl-pds">'</span></span> -f1<span class="pl-pds">)</span></span>
<span class="pl-c1">echo</span> <span class="pl-s"><span class="pl-pds">"</span>FPS: <span class="pl-smi">${FPS}</span><span class="pl-pds">"</span></span>

if [ "im" == "$4" ]; then # use imagemagick
FPS=$(echo "1 / ${FPS} * 100" |bc -l)
$CONVERT "$1/.${suffix}"  -delay ${FPS} -loop 0 "$3"
elif [ "gm" == "$4" ]; then # use graphicsmagick
FPS=$(echo "1 / ${FPS} * 100" |bc -l)
$GM convert "$1/.${suffix}"  -delay ${FPS} -loop 0 "$3"
else # use crappy gif-algorithm from ffmpeg
$FFMPEG -f image2 -framerate ${FPS} -i "$1/%08d.${suffix}" "$3"
fi

From DeepDreamVideo, source

GIF to frames

ffmpeg -i video.mpg image%d.jpg

convert -coalesce animated.gif image%05d.png

High quality GIF

with ffmpeg / based on this article

Generate a palette :

#!/bin/sh
start_time=30
duration=3
ffmpeg -y -ss $start_time -t $duration -i input.avi \
-vf fps=10,scale=320:-1:flags=lanczos,palettegen palette.png

Output the GIF using the palette :

#!/bin/sh
start_time=30
duration=3
ffmpeg -ss $start_time -t $duration -i input.avi -i palette.png -filter_complex \
"fps=10,scale=320:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif

article

Optimize GIF

convert -layers Optimize output.gif output_optimized.gif

Lossy GIF Compressor

./gifsicle -O3 --lossy=80 -o lossy-compressed.gif input.gif

Lossy Gif

Making GIF from video

from moviepy.editor import *
clip = (VideoFileClip("input.avi")
.subclip((4,00.00),(5,00.00))
.resize(0.3))
clip.write_gif("output.gif")

article

Cinemagraphs

Freezing a region

from moviepy.editor import *
clip = (VideoFileClip("input.avi")
.subclip((4,00.00),(5,00.00))
.resize(0.3)
.fx(vfx.freezeregion, outsideregion=(170, 230, 380, 320)))
clip.write_gif("output.gif", fps=15)

article

ffmpeg \
-ss ${starttime} -t ${duration} -i ${vidfile}                         `# body of loop` \
-ss TODO ${starttime} MINUS ${duration} -t ${fadetime} -i ${vidfile}  `# lead-in for crossfade` \
-loop 1 -i ${stillfile}                                               `# masked still image` \
-filter_complex "
  [0:v]setpts=PTS-STARTPTS[vid];                                      `# speed adjustment - not needed here, so noop`
  color=white,scale=3840x2160,fade=in:st=0:d=${fadetime}[alpha];      `# crossfade alpha, double length ahead of speed change`
  [1:v][alpha]alphamerge[am];                                         `# apply alpha to lead-in`
  [am]setpts=PTS+(${duration}-${fadetime})/TB[layer2];                  `# speed adjustment and offset for lead-in`
  [vid][layer2]overlay[oo];                                           `# overlay for crossfade`
  [oo][2:v]overlay=shortest=1[out1];                                  `# overlay still image`
  [out1]crop=w=${cropfactor}*iw:h=${cropfactor}*ih:y=${yoffset}*ih,scale=${outputwidth}:-1, `# crop and scale`
  eq=gamma=${gamma}:contrast=${contrast}:saturation=${saturation},unsharp                   `# final adjustments`
" -an output.mp4

by Roger Barnes

Perfect Loop

import moviepy.editor as mp
from moviepy.video.tools.cuts import FramesMatches
clip = mp.VideoFileClip("input.avi").resize(0.3)
scenes = FramesMatches.from_clip(clip, 10, 3)
selectedscenes = scenes.selectscenes(2, 1, 4, 0.5)
selectedscenes.writegifs(clip.resize(width=450), "./outputs_directory")

article

Youtube video to GIF

Download it via youtube-dl and then convert it.

youtube-dl https://www.youtube.com/watch?v=V2XpsaLqXc8

Youtube-dl

with vid2gif online - source

Grabbing each frame of an HTML5 Canvas

using PhantomJS

Example with this canvas.

var webPage = require('webpage');
var fs = require('fs');
var page = webPage.create();
var NB_FRAME = 100;
var current = 0;
page.open('http://www.effectgames.com/demos/canvascycle/?sound=0',
function(status) {
if (status === "success") {
var current = 0;
var grabber = setInterval(function () {
var frame = page.evaluate(function() {
return document.getElementById('mycanvas').toDataURL("image/png").split(",")[1];
});
fs.write("./frame-" + current + ".png",atob(frame), 'wb');
if (++current === NB_FRAME) {
window.clearInterval(grabber);
phantom.exit(0);
}
}, 1000);
}
});

or use ccapture.js.

Miscellaneous

Why is the GIF I created so slow? - Using ImageMagick to solve problems concerning GIF speed.

Use

The best ways to use this list are:

by browing the contents
by using command + F to search the contents

Authors

Craig Davison

With many thanks to the contributors. 👏

Contributions are welcome! Check out the Contributing Guidelines. 🙌

License & Credits

Unless otherwise stated:

Based on a recovered list:

AwesomeList

GIF

😎 A curated list of awesome GIF resourcesdavison.io/awesome-gif

davisonio/awesome-gifUpdated 3 months ago 355 6 23

Contents

Awesome GIF 😎

Contents

General Tools

Utilities

Libraries

ActionScript

C++

C#

Haxe

Java

JavaScript

PHP

Objective-C

Swift

GUI

Hosting

Online Tools

Community

Niche

Scripts

Frames to GIF

GIF to frames

High quality GIF

Optimize GIF

Lossy GIF Compressor

Making GIF from video

Cinemagraphs

Perfect Loop

Youtube video to GIF

Grabbing each frame of an HTML5 Canvas

Miscellaneous

Use

Authors

License & Credits

.css-qmf0e9{-webkit-text-decoration:none;text-decoration:none;}.css-qmf0e9:hover{-webkit-text-decoration:none;text-decoration:none;color:#2a2a2b;}Awesome.css-17ukhxk{color:#686de0;}List

GIF

.css-1kr4fmq{margin-right:1rem;}😎 A curated list of awesome GIF resources.css-r6uohp{display:inline-block;color:#686de0;}.css-r6uohp:hover{-webkit-text-decoration:none;text-decoration:none;color:#2a2a2b;}davison.io/awesome-gif

Contents

Awesome GIF 😎

Contents

General Tools

Utilities

Libraries

ActionScript

C++

C#

Haxe

Java

JavaScript

PHP

Objective-C

Swift

GUI

Hosting

Online Tools

Community

Niche

Scripts

Frames to GIF

GIF to frames

High quality GIF

Optimize GIF

Lossy GIF Compressor

Making GIF from video

Cinemagraphs

Perfect Loop

Youtube video to GIF

Grabbing each frame of an HTML5 Canvas

Miscellaneous

Use

Authors

License & Credits

AwesomeList

😎 A curated list of awesome GIF resourcesdavison.io/awesome-gif