# Awesome GIF

> A curated list of awesome GIF resources.

A list of tools, scripts, libraries, examples & other resources related to the Graphics Interchange Format (GIF).

## Contents

- General Tools
- Utilities
- Libraries
  - ActionScript
  - C++
  - C#
  - Haxe
  - Java
  - JavaScript
  - PHP
  - Objective-C
  - Swift
- GUI
- Hosting
- Online Tools
- Community
- 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

## 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 screen recording into GIF.
- 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.
- 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.
- Gifcurry - Open-source, Haskell-built editor for GIF makers.

## 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.
- msf_gif - C/C++ single-header library for creating 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 - Create GIF from the DOM.
- Omggif - 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

- 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.

### Swift

- SwiftyGif - High performance & easy to use Gif engine.
- Gifu - Animated GIF support for iOS in Swift.

## GUI

- Glyph - Tool for generating seamlessly looping GIFs and cinemagraphs from videos.
- Qgifer
- 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 Tools

- Vid2gif - Video to GIF by imgur.
- EzGif - Online GIF maker and image editor.
- Giflr - A web app for making or remixing animated GIFs.

## Community

- Giphy.com
- /r/educationalgifs

## 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

### 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

### 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

### 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);
      }
    });

## 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

## Credits

By Craig Davison and contributors.

Based on a recovered list by Ismail Baaj.

gif.md Github