rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
master
awesome-awesomeness/html/gif.md2.html
rhetenor 652812eed0 update
2025-07-18 23:13:11 +02:00

468 lines
38 KiB
HTML
Raw Permalink Blame History

<h1 id="awesome-gif-awesome">Awesome GIF <a
href="https://awesome.re"><img src="https://awesome.re/badge-flat.svg"
alt="Awesome" /></a></h1>
<blockquote>
<p>A curated list of awesome <a
href="https://en.wikipedia.org/wiki/GIF">GIF</a> resources.</p>
</blockquote>
<p>A list of tools, scripts, libraries, examples &amp; other resources
related to the Graphics Interchange Format (GIF).</p>
<h2 id="contents">Contents</h2>
<!--lint disable awesome-toc-->
<ul>
<li><a href="#general-tools">General Tools</a></li>
<li><a href="#utilities">Utilities</a></li>
<li><a href="#libraries">Libraries</a>
<ul>
<li><a href="#actionscript">ActionScript</a></li>
<li><a href="#c">C++</a></li>
<li><a href="#c-sharp">C#</a></li>
<li><a href="#haxe">Haxe</a></li>
<li><a href="#java">Java</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#php">PHP</a></li>
<li><a href="#objective-c">Objective-C</a></li>
<li><a href="#swift">Swift</a></li>
</ul></li>
<li><a href="#gui">GUI</a></li>
<li><a href="#hosting">Hosting</a></li>
<li><a href="#online-tools">Online Tools</a></li>
<li><a href="#community">Community</a></li>
<li><a href="#scripts">Scripts</a>
<ul>
<li><a href="#frames-to-gif">Frames to GIF</a></li>
<li><a href="#gif-to-frames">GIF to frames</a></li>
<li><a href="#high-quality-gif">High quality GIF</a></li>
<li><a href="#optimize-gif">Optimize GIF</a></li>
<li><a href="#lossy-gif-compressor">Lossy GIF Compressor</a></li>
<li><a href="#making-gif-from-video">Making GIF from video</a></li>
<li><a href="#cinemagraphs">Cinemagraphs</a></li>
<li><a href="#perfect-loop">Perfect loop</a></li>
<li><a href="#youtube-video-to-gif">YouTube video to GIF</a></li>
<li><a href="#grabbing-each-frame-of-an-html5-canvas">Grabbing each
frame of an HTML5 canvas</a></li>
</ul></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<h2 id="general-tools">General Tools</h2>
<ul>
<li><a href="https://www.ffmpeg.org">FFmpeg</a></li>
<li><a
href="http://www.imagemagick.org/script/index.php">ImageMagick</a></li>
<li><a href="http://www.graphicsmagick.org/">GraphicsMagick</a> -
GraphicsMagick is usually faster than ImageMagick.</li>
<li><a href="https://zulko.github.io/moviepy/">MoviePy</a> - Python
module for video editing.</li>
</ul>
<h2 id="utilities">Utilities</h2>
<ul>
<li><a href="https://github.com/lukechilds/gifgen">Gifgen</a> - Simple
high quality GIF encoding.</li>
<li><a href="https://github.com/jclem/gifify">Gifify</a> - Convert
screen recording into GIF.</li>
<li><a href="https://github.com/jglovier/gifs">Gifs</a> - Storage place
for GIFs.</li>
<li><a href="https://github.com/yahoo/gifshot">Gifshot</a> - Create
animated GIFs from media by Yahoo. (<a
href="http://yahoo.github.io/gifshot/">demo</a>)</li>
<li><a href="https://github.com/videlalvaro/gifsockets">Gifsockets</a> -
Real Time communication library using Animated GIFs as a transport.</li>
<li><a href="https://github.com/geelen/x-gif">X-gif</a> - A web
component for flexible GIF playback.</li>
<li><a href="https://github.com/yaronn/GifW00t">GifW00t</a> - JavaScript
web recorder.</li>
<li><a href="https://github.com/lelandbatey/gif-machine">gif-machine</a>
- GIF creation from YouTube videos.</li>
<li><a href="https://github.com/jbochi/gifstreaming">gifstreaming</a> -
Live video streaming server.</li>
<li><a href="https://github.com/dergachev/screengif">Screengif</a> -
Create animated GIF screencasts.</li>
<li><a href="https://github.com/sidorares/vnc-over-gif">vnc-over-gif</a>
- Serves screen updates as animated GIF over http.</li>
<li><a href="https://github.com/jaipandya/gifdeck">gifdeck</a> - Convert
your SlideShares into animated GIFs.</li>
<li><a href="https://github.com/schuyler/gifbot">Gifbot</a> - GIF search
for Slack.</li>
<li><a href="https://github.com/FuzzyWobble/GIF-Camera">Gif-camera</a> -
Create animated GIFs using webcam.</li>
<li><a href="https://github.com/zehfernandes/gifline">Gifline</a> -
Chrome extension to put GIFs in your emails.</li>
<li><a href="https://github.com/markjaquith/gifdrop">Gifdrop</a> -
Create a repository for your collection of GIF images.</li>
<li><a href="https://github.com/node-gh/gh-gif">Gh-gif</a> - NodeGH
plugin for commenting on pull requests/issues using GIF reactions.</li>
<li><a href="https://github.com/z24/tty2gif">Tty2gif</a> - Record
scripts and their outputs into both binary and GIF formats.</li>
<li><a href="https://github.com/desktoppr/giftoppr">Giftoppr</a> - Sync
your favourite GIFs with Dropbox.</li>
<li><a href="https://github.com/Fauntleroy/GIFit">Gifit</a> - Chrome
extension to make a GIF from a YouTube video.</li>
<li><a href="https://github.com/spite/ccapture.js">Ccapture.js</a> -
Capture animations created with HTML5 canvas.</li>
<li><a href="https://getkap.co/">Kap</a> - Beautiful open-source app to
capture your screen and export to GIF.</li>
<li><a href="https://github.com/rotblauer/gifit">Gifit (the other
one)</a> - Get a search resulting giphy GIF in markdown in stdout, ala
<code>$ gifit kittens</code>.</li>
<li><a href="https://github.com/ImageOptim/gifski">gifski</a> -
High-quality GIF encoder based on libimagequant.</li>
<li><a href="https://github.com/lettier/gifcurry">Gifcurry</a> -
Open-source, Haskell-built editor for GIF makers.</li>
</ul>
<h2 id="libraries">Libraries</h2>
<h3 id="actionscript">ActionScript</h3>
<ul>
<li><a
href="https://github.com/theturtle32/Flash-Animated-GIF-Library">Flash
Animated GIF Library</a> - AS3 library for playing Animated GIFs in
Flash.</li>
</ul>
<h3 id="c">C++</h3>
<ul>
<li><a href="https://github.com/pkrumins/node-gif">Node-gif</a> - C++
library to make GIF.</li>
<li><a href="https://github.com/charlietangora/gif-h">Gif-h</a> - C++
one-header library for the creation of animated GIFs.</li>
<li><a href="https://github.com/notnullnotvoid/msf_gif">msf_gif</a> -
C/C++ single-header library for creating animated GIFs.</li>
</ul>
<h3 id="c-sharp">
C#
</h2>
<ul>
<li><a href="https://github.com/Speiser/dot-screencap">dot-screencap</a>
- A simple libary to record your screen and save it as animated
GIF.</li>
<li><a
href="https://github.com/XamlAnimatedGif/WpfAnimatedGif">WpfAnimatedGif</a>
- A simple library to display animated GIF images in WPF.</li>
<li><a
href="https://github.com/XamlAnimatedGif/XamlAnimatedGif">XamlAnimatedGif</a>
- A simple library to display animated GIF images in XAML apps (WPF,
WinRT, Windows Phone).</li>
<li><a href="https://github.com/mrousavy/AnimatedGif">AnimatedGif</a> -
A high performance .NET library for reading and creating animated
GIFs.</li>
</ul>
<h3 id="haxe">Haxe</h3>
<ul>
<li><a href="https://github.com/snowkit/gif">Gif</a> - Haxe GIF
encoder.</li>
</ul>
<h3 id="java">Java</h3>
<ul>
<li><a
href="https://github.com/koral--/android-gif-drawable">Android-gif-drawable</a>
- Views and Drawable for displaying animated GIFs on Android.</li>
<li><a
href="https://github.com/Hipmob/gifanimateddrawable">gifanimateddrawable</a>
- Use an animated GIF as an Android Drawable.</li>
<li><a href="https://github.com/RoiSoleil/GifView">GifView</a> - Android
library to deal with GIF.</li>
<li><a href="https://github.com/sbakhtiarov/gif-movie-view">Gif Movie
View</a> - Android View widget for displaying GIF animations.</li>
<li><a href="https://github.com/felipecsl/GifImageView">GifImageView</a>
- Android ImageView that handles animated GIF images.</li>
<li><a
href="https://github.com/extrapixel/gif-animation">Gif-animation</a> -
Processing library to play and export GIF.</li>
<li><a
href="https://github.com/nbadal/android-gif-encoder">Android-gif-encoder</a>
- Animated GIF encoder for Android.</li>
<li><a href="https://github.com/curtislarson/GIFDroid">GIFDroid</a> -
Android video to GIF converter.</li>
<li><a
href="https://github.com/CaptPhunkosis/Android-GifStitch">Android-GifStitch</a>
- Create and share animated GIFs.</li>
</ul>
<h3 id="javascript">JavaScript</h3>
<ul>
<li><a href="https://github.com/jnordberg/gif.js">Gif.js</a> - Create
GIF from the DOM.</li>
<li><a href="https://github.com/deanm/omggif">Omggif</a> - GIF 89a
encoder and decoder.</li>
<li><a href="https://github.com/sole/Animated_GIF">Animated_GIF</a> -
JavaScript library for creating animated GIFs.</li>
<li><a href="https://github.com/krasimir/gifffer">Gifffer</a> -
JavaScript library that prevents the autoplaying of the animated
GIFs.</li>
<li><a href="https://github.com/rubentd/gifplayer">Gifplayer</a> -
JQuery plugin to play and stop animated GIFs.</li>
<li><a href="https://github.com/shachaf/jsgif">Jsgif</a> - JavaScript
GIF parser and player.</li>
<li><a href="https://github.com/tj/node-gify">node-gify</a> - JavaScript
convert videos to GIFs using ffmpeg and gifsicle.</li>
<li><a href="https://github.com/eugeneware/gifencoder">Gifencoder</a> -
Server side animated GIF generation for Node.js.</li>
<li><a href="https://github.com/hughsk/gif-video">Gif-video</a> -
JavaScript Convert a GIF image into an HTML5-ready video.</li>
<li><a href="https://github.com/apankrat/gif-player">Gif-player</a> -
On-demand GIF loader/player in JavaScript.</li>
<li><a
href="https://github.com/Viral-MediaLab/gifgifLab-face">GifgifLab-face</a>
- Facial-emotion detectors.</li>
<li><a href="https://github.com/javascipt/node-youtube">node-youtube</a>
- YouTube to snapshots and GIFs.</li>
</ul>
<h3 id="php">PHP</h3>
<ul>
<li><a href="https://github.com/Sybio/GifCreator">GifCreator</a> - PHP
class that creates animated GIF from multiple images.</li>
<li><a href="https://github.com/msng/spacer.gif">Spacer.gif</a> - PHP
script offering spacer.gif 1x1.</li>
<li><a
href="https://github.com/Sybio/GifFrameExtractor">GifFrameExtractor</a>
- PHP class that separates all the frames of an animated GIF.</li>
</ul>
<h3 id="objective-c">Objective-C</h3>
<ul>
<li><a
href="https://github.com/mayoff/uiimage-from-animated-gif">UIimage from
GIF</a> - UIImage category that loads animated GIFs.</li>
<li><a
href="https://github.com/cyndibaby905/GIFRefreshControl">GIFRefreshControl</a>
- “Twitter music” and “Yahoo! Weather” like pull-to-refresh
control.</li>
<li><a
href="https://github.com/yfme/UIImageView-PlayGIF">UIImageView-PlayGIF</a>
- UIImageView category/subclass for playing GIF.</li>
<li><a
href="https://github.com/Flipboard/FLAnimatedImage">FLAnimatedImage</a>
- GIF engine for iOS by FlipBoard.</li>
<li><a
href="https://github.com/arturogutierrez/Animated-GIF-iPhone">Animated-GIF-iPhone</a>
- Support for Animated GIF on iOS.</li>
<li><a
href="https://github.com/uzysjung/UzysAnimatedGifPullToRefresh">UzysAnimatedGifPullToRefresh</a>
- PullToRefresh using animated GIF to any scrollView.</li>
<li><a href="https://github.com/smileEvday/SvGifView">SvGifView</a> -
iOS load and display GIF.</li>
<li><a href="https://github.com/cemolcay/GiFHUD">GifHUD</a> - iOS
progress hud for displaying only animated GIF images.</li>
<li><a
href="https://github.com/ElvinJin/Video-Background-GIF">Video-Background
GIF</a> - iOS Video Background GIF.</li>
<li><a
href="https://github.com/kasatani/AnimatedGifExample">AnimatedGifExample</a>
- iOS animated and transparent GIFs.</li>
</ul>
<h3 id="swift">Swift</h3>
<ul>
<li><a href="https://github.com/kirualex/SwiftyGif">SwiftyGif</a> - High
performance &amp; easy to use Gif engine.</li>
<li><a href="https://github.com/kaishin/gifu">Gifu</a> - Animated GIF
support for iOS in Swift.</li>
</ul>
<h2 id="gui">GUI</h2>
<ul>
<li><a href="http://www.glyph.video/">Glyph</a> - Tool for generating
seamlessly looping GIFs and cinemagraphs from videos.</li>
<li><a href="https://sourceforge.net/projects/qgifer/">Qgifer</a></li>
<li><a href="https://github.com/unixpickle/GifPro">GifPro</a> - GIF
encoder for Mac.</li>
</ul>
<h2 id="hosting">Hosting</h2>
<ul>
<li><a href="https://gfycat.com">Gfycat</a> - Maximum GIF/video length:
15 seconds. Maximum file upload is 300Mb.</li>
<li><a href="https://imgur.com">Imgur</a> - Maximum file upload is
50MB.</li>
</ul>
<h2 id="online-tools">Online Tools</h2>
<ul>
<li><a href="https://imgur.com/vidgif">Vid2gif</a> - Video to GIF by
imgur.</li>
<li><a href="https://ezgif.com/">EzGif</a> - Online GIF maker and image
editor.</li>
<li><a href="https://giflr.com/">Giflr</a> - A web app for making or
remixing animated GIFs.</li>
</ul>
<h2 id="community">Community</h2>
<ul>
<li><a href="https://giphy.com">Giphy.com</a></li>
<li><a
href="https://www.reddit.com/r/educationalgifs/">/r/educationalgifs</a></li>
</ul>
<h2 id="scripts">Scripts</h2>
<h3 id="frames-to-gif">Frames to GIF</h3>
<p>FFmpeg</p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">ffmpeg</span> <span class="at">-f</span> image2 <span class="at">-i</span> image%d.jpg animated.gif</span></code></pre></div>
<p>Imagemagick</p>
<div class="sourceCode" id="cb2"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="ex">convert</span> <span class="at">-delay</span> 20 <span class="at">-loop</span> 0 frames<span class="pp">*</span>.png animated.gif</span></code></pre></div>
<p>Bash script (<code>frames2gif.sh</code>) for GraphicsMagick,
ImageMagick, FFmpeg</p>
<div class="sourceCode" id="cb3"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/bin/bash</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="cf">if</span> <span class="bu">[</span> <span class="va">$#</span> <span class="ot">-ne</span> 5 <span class="bu">]</span><span class="kw">;</span> <span class="cf">then</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="bu">echo</span> <span class="st">&quot;please provide the moviename and directory where to store the frames&quot;</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="bu">echo</span> <span class="st">&quot;./frames2gif.sh [directory] [movie.mp4] [filename.gif] [gm|im|ffmpeg] [png|jpg]&quot;</span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a> <span class="bu">exit</span> 1</span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="cf">fi</span></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> <span class="bu">[</span> <span class="st">&quot;png&quot;</span> <span class="ot">==</span> <span class="st">&quot;</span><span class="va">$5</span><span class="st">&quot;</span> <span class="bu">]</span><span class="kw">;</span> <span class="cf">then</span></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="va">suffix</span><span class="op">=</span><span class="st">&quot;png&quot;</span></span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">else</span></span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a> <span class="va">suffix</span><span class="op">=</span><span class="st">&quot;jpg&quot;</span></span>
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a> <span class="cf">fi</span></span>
<span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-13"><a href="#cb3-13" aria-hidden="true" tabindex="-1"></a> <span class="va">CONVERT</span><span class="op">=</span><span class="va">$(</span><span class="fu">which</span> convert<span class="va">)</span></span>
<span id="cb3-14"><a href="#cb3-14" aria-hidden="true" tabindex="-1"></a> <span class="va">GM</span><span class="op">=</span><span class="va">$(</span><span class="fu">which</span> gm<span class="va">)</span></span>
<span id="cb3-15"><a href="#cb3-15" aria-hidden="true" tabindex="-1"></a> <span class="va">FFMPEG</span><span class="op">=</span><span class="va">$(</span><span class="fu">which</span> ffmpeg<span class="va">)</span></span>
<span id="cb3-16"><a href="#cb3-16" aria-hidden="true" tabindex="-1"></a> <span class="va">FFPROBE</span><span class="op">=</span><span class="va">$(</span><span class="fu">which</span> ffprobe<span class="va">)</span></span>
<span id="cb3-17"><a href="#cb3-17" aria-hidden="true" tabindex="-1"></a> <span class="va">FPS</span><span class="op">=</span><span class="va">$($FFPROBE</span> <span class="at">-show_streams</span> <span class="at">-select_streams</span> v <span class="at">-i</span> <span class="st">&quot;</span><span class="va">$2</span><span class="st">&quot;</span> <span class="dv">2</span><span class="op">&gt;</span>/dev/null <span class="kw">|</span> <span class="fu">grep</span> <span class="st">&quot;r_frame_rate&quot;</span> <span class="kw">|</span> <span class="fu">cut</span> <span class="at">-d</span><span class="st">&#39;=&#39;</span> <span class="at">-f2</span> <span class="kw">|</span> <span class="fu">cut</span> <span class="at">-d</span><span class="st">&#39;/&#39;</span> <span class="at">-f1</span><span class="va">)</span></span>
<span id="cb3-18"><a href="#cb3-18" aria-hidden="true" tabindex="-1"></a> <span class="bu">echo</span> <span class="st">&quot;FPS: </span><span class="va">${FPS}</span><span class="st">&quot;</span></span>
<span id="cb3-19"><a href="#cb3-19" aria-hidden="true" tabindex="-1"></a><span class="cf">if</span> <span class="bu">[</span> <span class="st">&quot;im&quot;</span> <span class="ot">==</span> <span class="st">&quot;</span><span class="va">$4</span><span class="st">&quot;</span> <span class="bu">]</span><span class="kw">;</span> <span class="cf">then</span> <span class="co"># use imagemagick</span></span>
<span id="cb3-20"><a href="#cb3-20" aria-hidden="true" tabindex="-1"></a> <span class="va">FPS</span><span class="op">=</span><span class="va">$(</span><span class="bu">echo</span> <span class="st">&quot;1 / </span><span class="va">${FPS}</span><span class="st"> * 100&quot;</span> <span class="kw">|</span><span class="fu">bc</span> <span class="at">-l</span><span class="va">)</span></span>
<span id="cb3-21"><a href="#cb3-21" aria-hidden="true" tabindex="-1"></a> <span class="va">$CONVERT</span> <span class="st">&quot;</span><span class="va">$1</span><span class="st">/*.</span><span class="va">${suffix}</span><span class="st">&quot;</span> <span class="at">-delay</span> <span class="va">${FPS}</span> <span class="at">-loop</span> 0 <span class="st">&quot;</span><span class="va">$3</span><span class="st">&quot;</span></span>
<span id="cb3-22"><a href="#cb3-22" aria-hidden="true" tabindex="-1"></a><span class="cf">elif</span> <span class="bu">[</span> <span class="st">&quot;gm&quot;</span> <span class="ot">==</span> <span class="st">&quot;</span><span class="va">$4</span><span class="st">&quot;</span> <span class="bu">]</span><span class="kw">;</span> <span class="cf">then</span> <span class="co"># use graphicsmagick</span></span>
<span id="cb3-23"><a href="#cb3-23" aria-hidden="true" tabindex="-1"></a> <span class="va">FPS</span><span class="op">=</span><span class="va">$(</span><span class="bu">echo</span> <span class="st">&quot;1 / </span><span class="va">${FPS}</span><span class="st"> * 100&quot;</span> <span class="kw">|</span><span class="fu">bc</span> <span class="at">-l</span><span class="va">)</span></span>
<span id="cb3-24"><a href="#cb3-24" aria-hidden="true" tabindex="-1"></a> <span class="va">$GM</span> convert <span class="st">&quot;</span><span class="va">$1</span><span class="st">/*.</span><span class="va">${suffix}</span><span class="st">&quot;</span> <span class="at">-delay</span> <span class="va">${FPS}</span> <span class="at">-loop</span> 0 <span class="st">&quot;</span><span class="va">$3</span><span class="st">&quot;</span></span>
<span id="cb3-25"><a href="#cb3-25" aria-hidden="true" tabindex="-1"></a><span class="cf">else</span> <span class="co"># use crappy gif-algorithm from ffmpeg</span></span>
<span id="cb3-26"><a href="#cb3-26" aria-hidden="true" tabindex="-1"></a> <span class="va">$FFMPEG</span> <span class="at">-f</span> image2 <span class="at">-framerate</span> <span class="va">${FPS}</span> <span class="at">-i</span> <span class="st">&quot;</span><span class="va">$1</span><span class="st">/%08d.</span><span class="va">${suffix}</span><span class="st">&quot;</span> <span class="st">&quot;</span><span class="va">$3</span><span class="st">&quot;</span></span>
<span id="cb3-27"><a href="#cb3-27" aria-hidden="true" tabindex="-1"></a><span class="cf">fi</span></span></code></pre></div>
<p>From <a
href="https://github.com/graphific/DeepDreamVideo">DeepDreamVideo</a>,
<a
href="https://github.com/graphific/DeepDreamVideo/blob/master/frames2gif.sh">source</a></p>
<h3 id="gif-to-frames">GIF to frames</h3>
<div class="sourceCode" id="cb4"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="ex">ffmpeg</span> <span class="at">-i</span> video.mpg image%d.jpg</span></code></pre></div>
<div class="sourceCode" id="cb5"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="ex">convert</span> <span class="at">-coalesce</span> animated.gif image%05d.png</span></code></pre></div>
<h3 id="high-quality-gif">High quality GIF</h3>
<p>with ffmpeg / based on this <a
href="http://blog.pkh.me/p/21-high-quality-gif-with-ffmpeg.html">article</a></p>
<ul>
<li>Generate a palette :</li>
</ul>
<div class="sourceCode" id="cb6"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/bin/sh</span></span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="va">start_time</span><span class="op">=</span>30</span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a><span class="va">duration</span><span class="op">=</span>3</span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a><span class="ex">ffmpeg</span> <span class="at">-y</span> <span class="at">-ss</span> <span class="va">$start_time</span> <span class="at">-t</span> <span class="va">$duration</span> <span class="at">-i</span> input.avi <span class="dt">\</span></span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a>-vf fps=10,scale=320:-1:flags=lanczos,palettegen palette.png</span></code></pre></div>
<ul>
<li>Output the GIF using the palette :</li>
</ul>
<div class="sourceCode" id="cb7"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/bin/sh</span></span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a><span class="va">start_time</span><span class="op">=</span>30</span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a><span class="va">duration</span><span class="op">=</span>3</span>
<span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a><span class="ex">ffmpeg</span> <span class="at">-ss</span> <span class="va">$start_time</span> <span class="at">-t</span> <span class="va">$duration</span> <span class="at">-i</span> input.avi <span class="at">-i</span> palette.png <span class="at">-filter_complex</span> <span class="dt">\</span></span>
<span id="cb7-5"><a href="#cb7-5" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;fps=10,scale=320:-1:flags=lanczos[x];[x][1:v]paletteuse&quot;</span> output.gif</span></code></pre></div>
<h3 id="optimize-gif">Optimize GIF</h3>
<pre><code>convert -layers Optimize output.gif output_optimized.gif</code></pre>
<h3 id="lossy-gif-compressor">Lossy GIF Compressor</h3>
<div class="sourceCode" id="cb9"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="ex">./gifsicle</span> <span class="at">-O3</span> <span class="at">--lossy</span><span class="op">=</span>80 <span class="at">-o</span> lossy-compressed.gif input.gif</span></code></pre></div>
<p><a href="https://kornel.ski/lossygif">Lossy Gif</a></p>
<h3 id="making-gif-from-video">Making GIF from video</h3>
<div class="sourceCode" id="cb10"><pre
class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> moviepy.editor <span class="im">import</span> <span class="op">*</span></span>
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a>clip <span class="op">=</span> (VideoFileClip(<span class="st">&quot;input.avi&quot;</span>)</span>
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a> .subclip((<span class="dv">4</span>,<span class="fl">00.00</span>),(<span class="dv">5</span>,<span class="fl">00.00</span>))</span>
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a> .resize(<span class="fl">0.3</span>))</span>
<span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a>clip.write_gif(<span class="st">&quot;output.gif&quot;</span>)</span></code></pre></div>
<!--lint ignore double-link-->
<p><a
href="http://zulko.github.io/blog/2014/01/23/making-animated-gifs-from-video-files-with-python/#converting-a-video-excerpt-into-a-gif">article</a></p>
<h3 id="cinemagraphs">Cinemagraphs</h3>
<p>Freezing a region</p>
<div class="sourceCode" id="cb11"><pre
class="sourceCode python"><code class="sourceCode python"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> moviepy.editor <span class="im">import</span> <span class="op">*</span></span>
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a>clip <span class="op">=</span> (VideoFileClip(<span class="st">&quot;input.avi&quot;</span>)</span>
<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a> .subclip((<span class="dv">4</span>,<span class="fl">00.00</span>),(<span class="dv">5</span>,<span class="fl">00.00</span>))</span>
<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a> .resize(<span class="fl">0.3</span>)</span>
<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a> .fx(vfx.freeze_region, outside_region<span class="op">=</span>(<span class="dv">170</span>, <span class="dv">230</span>, <span class="dv">380</span>, <span class="dv">320</span>)))</span>
<span id="cb11-7"><a href="#cb11-7" aria-hidden="true" tabindex="-1"></a>clip.write_gif(<span class="st">&quot;output.gif&quot;</span>, fps<span class="op">=</span><span class="dv">15</span>)</span></code></pre></div>
<!--lint ignore double-link-->
<p><a
href="http://zulko.github.io/blog/2014/01/23/making-animated-gifs-from-video-files-with-python/#freezing-a-region">article</a></p>
<div class="sourceCode" id="cb12"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="ex">ffmpeg</span> <span class="dt">\</span></span>
<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a>-ss <span class="va">${starttime}</span> <span class="at">-t</span> <span class="va">${duration}</span> <span class="at">-i</span> <span class="va">${vidfile}</span> <span class="kw">`</span><span class="co"># body of loop</span><span class="kw">`</span> <span class="dt">\</span></span>
<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a>-ss TODO <span class="va">${starttime}</span> MINUS <span class="va">${duration}</span> <span class="at">-t</span> <span class="va">${fadetime}</span> <span class="at">-i</span> <span class="va">${vidfile}</span> <span class="kw">`</span><span class="co"># lead-in for crossfade</span><span class="kw">`</span> <span class="dt">\</span></span>
<span id="cb12-4"><a href="#cb12-4" aria-hidden="true" tabindex="-1"></a>-loop 1 <span class="at">-i</span> <span class="va">${stillfile}</span> <span class="kw">`</span><span class="co"># masked still image</span><span class="kw">`</span> <span class="dt">\</span></span>
<span id="cb12-5"><a href="#cb12-5" aria-hidden="true" tabindex="-1"></a>-filter_complex <span class="st">&quot;</span></span>
<span id="cb12-6"><a href="#cb12-6" aria-hidden="true" tabindex="-1"></a><span class="st"> [0:v]setpts=PTS-STARTPTS[vid]; </span><span class="kw">`</span><span class="co"># speed adjustment - not needed here, so noop</span><span class="kw">`</span></span>
<span id="cb12-7"><a href="#cb12-7" aria-hidden="true" tabindex="-1"></a><span class="st"> color=white,scale=3840x2160,fade=in:st=0:d=</span><span class="va">${fadetime}</span><span class="st">[alpha]; </span><span class="kw">`</span><span class="co"># crossfade alpha, double length ahead of speed change</span><span class="kw">`</span></span>
<span id="cb12-8"><a href="#cb12-8" aria-hidden="true" tabindex="-1"></a><span class="st"> [1:v][alpha]alphamerge[am]; </span><span class="kw">`</span><span class="co"># apply alpha to lead-in</span><span class="kw">`</span></span>
<span id="cb12-9"><a href="#cb12-9" aria-hidden="true" tabindex="-1"></a><span class="st"> [am]setpts=PTS+(</span><span class="va">${duration}</span><span class="st">-</span><span class="va">${fadetime}</span><span class="st">)/TB[layer2]; </span><span class="kw">`</span><span class="co"># speed adjustment and offset for lead-in</span><span class="kw">`</span></span>
<span id="cb12-10"><a href="#cb12-10" aria-hidden="true" tabindex="-1"></a><span class="st"> [vid][layer2]overlay[oo]; </span><span class="kw">`</span><span class="co"># overlay for crossfade</span><span class="kw">`</span></span>
<span id="cb12-11"><a href="#cb12-11" aria-hidden="true" tabindex="-1"></a><span class="st"> [oo][2:v]overlay=shortest=1[out1]; </span><span class="kw">`</span><span class="co"># overlay still image</span><span class="kw">`</span></span>
<span id="cb12-12"><a href="#cb12-12" aria-hidden="true" tabindex="-1"></a><span class="st"> [out1]crop=w=</span><span class="va">${cropfactor}</span><span class="st">*iw:h=</span><span class="va">${cropfactor}</span><span class="st">*ih:y=</span><span class="va">${yoffset}</span><span class="st">*ih,scale=</span><span class="va">${outputwidth}</span><span class="st">:-1, </span><span class="kw">`</span><span class="co"># crop and scale</span><span class="kw">`</span></span>
<span id="cb12-13"><a href="#cb12-13" aria-hidden="true" tabindex="-1"></a><span class="st"> eq=gamma=</span><span class="va">${gamma}</span><span class="st">:contrast=</span><span class="va">${contrast}</span><span class="st">:saturation=</span><span class="va">${saturation}</span><span class="st">,unsharp </span><span class="kw">`</span><span class="co"># final adjustments</span><span class="kw">`</span></span>
<span id="cb12-14"><a href="#cb12-14" aria-hidden="true" tabindex="-1"></a><span class="st">&quot;</span> <span class="at">-an</span> output.mp4</span></code></pre></div>
<h3 id="perfect-loop">Perfect Loop</h3>
<div class="sourceCode" id="cb13"><pre
class="sourceCode python"><code class="sourceCode python"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> moviepy.editor <span class="im">as</span> mp</span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> moviepy.video.tools.cuts <span class="im">import</span> FramesMatches</span>
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a>clip <span class="op">=</span> mp.VideoFileClip(<span class="st">&quot;input.avi&quot;</span>).resize(<span class="fl">0.3</span>)</span>
<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a>scenes <span class="op">=</span> FramesMatches.from_clip(clip, <span class="dv">10</span>, <span class="dv">3</span>)</span>
<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a>selected_scenes <span class="op">=</span> scenes.select_scenes(<span class="dv">2</span>, <span class="dv">1</span>, <span class="dv">4</span>, <span class="fl">0.5</span>)</span>
<span id="cb13-8"><a href="#cb13-8" aria-hidden="true" tabindex="-1"></a>selected_scenes.write_gifs(clip.resize(width<span class="op">=</span><span class="dv">450</span>), <span class="st">&quot;./outputs_directory&quot;</span>)</span></code></pre></div>
<p><a
href="http://zulko.github.io/blog/2015/02/01/extracting-perfectly-looping-gifs-from-videos-with-python-and-moviepy/">article</a></p>
<h3 id="youtube-video-to-gif">YouTube video to GIF</h3>
<ul>
<li>Download it via youtube-dl and then convert it.</li>
</ul>
<pre><code>youtube-dl https://www.youtube.com/watch?v=V2XpsaLqXc8</code></pre>
<p><a href="https://rg3.github.io/youtube-dl/">Youtube-dl</a></p>
<h3 id="grabbing-each-frame-of-an-html5-canvas">Grabbing each frame of
an HTML5 Canvas</h3>
<p>Using <a href="https://phantomjs.org">PhantomJS</a>.</p>
<p>Example with this <a
href="http://www.effectgames.com/demos/canvascycle/?sound=0">canvas</a>.</p>
<div class="sourceCode" id="cb15"><pre
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> webPage <span class="op">=</span> <span class="pp">require</span>(<span class="st">&#39;webpage&#39;</span>)<span class="op">;</span></span>
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> fs <span class="op">=</span> <span class="pp">require</span>(<span class="st">&#39;fs&#39;</span>)<span class="op">;</span></span>
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> page <span class="op">=</span> webPage<span class="op">.</span><span class="fu">create</span>()<span class="op">;</span></span>
<span id="cb15-4"><a href="#cb15-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb15-5"><a href="#cb15-5" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> NB_FRAME <span class="op">=</span> <span class="dv">100</span><span class="op">;</span></span>
<span id="cb15-6"><a href="#cb15-6" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> current <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb15-7"><a href="#cb15-7" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb15-8"><a href="#cb15-8" aria-hidden="true" tabindex="-1"></a>page<span class="op">.</span><span class="fu">open</span>(<span class="st">&#39;http://www.effectgames.com/demos/canvascycle/?sound=0&#39;</span><span class="op">,</span></span>
<span id="cb15-9"><a href="#cb15-9" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span>(status) {</span>
<span id="cb15-10"><a href="#cb15-10" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (status <span class="op">===</span> <span class="st">&quot;success&quot;</span>) {</span>
<span id="cb15-11"><a href="#cb15-11" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> current <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb15-12"><a href="#cb15-12" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> grabber <span class="op">=</span> <span class="pp">setInterval</span>(<span class="kw">function</span> () {</span>
<span id="cb15-13"><a href="#cb15-13" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> frame <span class="op">=</span> page<span class="op">.</span><span class="fu">evaluate</span>(<span class="kw">function</span>() {</span>
<span id="cb15-14"><a href="#cb15-14" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">&#39;mycanvas&#39;</span>)<span class="op">.</span><span class="fu">toDataURL</span>(<span class="st">&quot;image/png&quot;</span>)<span class="op">.</span><span class="fu">split</span>(<span class="st">&quot;,&quot;</span>)[<span class="dv">1</span>]<span class="op">;</span></span>
<span id="cb15-15"><a href="#cb15-15" aria-hidden="true" tabindex="-1"></a> })<span class="op">;</span></span>
<span id="cb15-16"><a href="#cb15-16" aria-hidden="true" tabindex="-1"></a> fs<span class="op">.</span><span class="fu">write</span>(<span class="st">&quot;./frame-&quot;</span> <span class="op">+</span> current <span class="op">+</span> <span class="st">&quot;.png&quot;</span><span class="op">,</span><span class="fu">atob</span>(frame)<span class="op">,</span> <span class="st">&#39;wb&#39;</span>)<span class="op">;</span></span>
<span id="cb15-17"><a href="#cb15-17" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (<span class="op">++</span>current <span class="op">===</span> NB_FRAME) {</span>
<span id="cb15-18"><a href="#cb15-18" aria-hidden="true" tabindex="-1"></a> <span class="bu">window</span><span class="op">.</span><span class="fu">clearInterval</span>(grabber)<span class="op">;</span></span>
<span id="cb15-19"><a href="#cb15-19" aria-hidden="true" tabindex="-1"></a> phantom<span class="op">.</span><span class="fu">exit</span>(<span class="dv">0</span>)<span class="op">;</span></span>
<span id="cb15-20"><a href="#cb15-20" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb15-21"><a href="#cb15-21" aria-hidden="true" tabindex="-1"></a> }<span class="op">,</span> <span class="dv">1000</span>)<span class="op">;</span></span>
<span id="cb15-22"><a href="#cb15-22" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb15-23"><a href="#cb15-23" aria-hidden="true" tabindex="-1"></a>})<span class="op">;</span></span></code></pre></div>
<h2 id="miscellaneous">Miscellaneous</h2>
<ul>
<li><a
href="https://superuser.com/questions/569924/why-is-the-gif-i-created-so-slow/569967">Why
is the GIF I created so slow?</a> - Using ImageMagick to solve problems
concerning GIF speed.</li>
</ul>
<h2 id="use">Use</h2>
<p>The best ways to use this list are:</p>
<ul>
<li>By browing the <a href="#contents">contents</a>.</li>
<li>By using <kbd>command</kbd> + <kbd>F</kbd> to search the
contents</li>
</ul>
<h2 id="credits">Credits</h2>
<p>By <a href="https://davison.io">Craig Davison</a> and
contributors.</p>
<p>Based on a <a
href="https://github.com/sindresorhus/awesome/issues/872">recovered
list</a> by <a href="https://ismailbaaj.fr">Ismail Baaj</a>.</p>
<p><a href="https://github.com/Kikobeats/awesome-gif">gif.md
Github</a></p>
Reference in New Issue View Git Blame Copy Permalink