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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    Create a Dynamic Table of Contents Using MooTools 1.2

    You've probably noticed that I shy away from writing really long articles. Here are a few reasons why: Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question. I've noticed that I have a hard time...

  • By
    Duplicate the jQuery Homepage Tooltips

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there's more CSS than there is jQuery code!  Let's explore how we can duplicate jQuery's tooltip effect. The HTML The overall...

Discussion

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