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

Incredible Demos

  • By
    Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

Discussion

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