Awesome GIF

A curated list of awesome gif tools and scripts : libraries, utilities, and short examples. For more awesomeness, check out awesome.

• Awesome GIF
  • General Tools
  • Utilities
  • Libraries
  • ActionScript
  • C++
  • C#
  • Haxe
  • Java
  • Javascript
  • PHP
  • Objective-c
  • Swift
  • GUI
  • Hosting
  • Online tool
  • Search Engine & communities
  • 3rd Party
  • 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
  • Speed
  • Grabbing each frame of an HTML5 canvas
  • Miscellaneous

General Tools

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

Utilities

• Gifify - convert screen recording into GIF
• Gifsicle - lossy gif compressor
• Gifs - storage place for gifs - demo
• 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

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#

• 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)

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

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
• iOS AnimatedGif - Animated GIF library for iPhone
• 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

• 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

Hosting

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

Online tool

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

Search engine and communities

• Giphy.com
• Gifme.io
• 9gag.com/gif
• Reactionsgifs
• Educational Gifs

3rd party

• 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=$(which convert)
    GM=$(which gm)
    FFMPEG=$(which ffmpeg)
    FFPROBE=$(which ffprobe)
    FPS=$($FFPROBE -show_streams -select_streams v -i "$2"  2>/dev/null | grep "r_frame_rate" | cut -d'=' -f2 | cut -d'/' -f1)
    echo "FPS: ${FPS}"
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.freeze_region, outside_region=(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)

selected_scenes = scenes.select_scenes(2, 1, 4, 0.5)
selected_scenes.write_gifs(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

Speed

see this stackoverflow's answer

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

Webkit request : add a function to WebKit to stop all in-progress GIF animations