How to Reverse an Animated GIF

By  on  

Modifying visual media via code has always been a fascination of mine. Probably because I'm not a designer and I tend to stick to what I'm good at. One visual effect I love is seeing video reversed -- it provides a sometimes hilarious perspective on a given event.

Take this reversed water effect for example:

To reverse an animated GIF or video, you can use the ImageMagick library:

convert water-forward.gif -coalesce -reverse -quiet -layers OptimizePlus  -loop 0 water-reversed.gif

If you're interested in media engineering, check out my previous ImageMagick tutorials. These awesome media libraries are as close to an artist I will ever get!

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

  • By
    dwProgressBar v2:  Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!