Code Monkey home page Code Monkey logo

awesome-gif's Introduction

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

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=$(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:

awesome-gif's People

Contributors

calinou avatar davisonio avatar dreanor avatar ibaaj avatar lettier avatar lukechilds avatar readmecritic avatar speiser avatar tensoon avatar waitsnake avatar whilei avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.