AwesomeList

444 awesome lists. 23 categories. 409 curators. I feel lucky.
Media

GIF

๐Ÿ˜Ž A curated list of awesome GIF resourcesdavison.io/awesome-gif

awesomeawesome-listgiflist

davisoniodavisonio/awesome-gifUpdated 355 6 23

Contents

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.

Contents

General Tools

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

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

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

Swift

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

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

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

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:

Built With LoveBuilt With LoveSearch by