Need help with awesome-gif?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

davisonio
470 Stars 36 Forks Creative Commons Zero v1.0 Universal 95 Commits 0 Opened issues

Description

A curated list of awesome GIF resources.

Services available

!
?

Need anything else?

Contributors list

Awesome GIF Awesome

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

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

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

  • 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

Scripts

Frames to GIF

FFmpeg

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

Imagemagick

bash
convert   -delay 20   -loop 0   frames*.png   animated.gif
Bash script (
frames2gif.sh
) for GraphicsMagick, ImageMagick, FFmpeg ```bash

!/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

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

Credits

Craig Davison

GitHub Twitter

...and contributors.

Contributions are welcome!

License

Unless otherwise stated:

Based on a recovered list:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.