Staaarter

GIF Reverser

Decodes an animated GIF's frames, reverses their playback order while keeping each frame's original display duration, and re-encodes a new animated GIF that plays backward. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-29
By Staaarter Team
editoranimationgif

Overview

Introduction

Playing an animation backward is a classic effect, whether for a boomerang-style loop or just to see a motion undone. This tool reverses an animated GIF's frame order without touching any frame's actual pixels.

It decodes the GIF, reverses the frame sequence, and re-encodes a new animated GIF, entirely client-side.

What Is GIF Reverser?

A client-side tool that reverses the order an animated GIF's frames play in, so the last frame becomes the first and vice versa, while every frame keeps its own original display duration attached as it moves to its new position.

Unlike this category's geometric-transform tools, it's a frame-order operation, not a per-pixel one; no frame's image content is modified.

How GIF Reverser Works

The GIF is fully decoded into its ordered sequence of composited frames (each already representing exactly what a player would show at that step, disposal methods and all), then that array is simply reversed.

The reversed frame sequence is re-encoded into a new GIF, with each frame keeping its original delay from the source and the source's loop count carried through unchanged.

When To Use GIF Reverser

Use it to create a "rewind" or boomerang-style effect from an existing animated GIF.

It's also handy for previewing a process in reverse, like an unfolding or building animation played backward to look like it's collapsing or undoing itself.

Features

Advantages

  • Preserves each frame's exact original display duration, so variable-speed animations still time correctly in reverse.
  • Doesn't touch pixel content at all, so there's no quality loss or re-quantization risk from the reversal itself.
  • Runs entirely client-side; nothing you upload leaves your browser.

Limitations

  • Only reverses frame order; it doesn't create a "there and back again" boomerang loop by itself (you'd need to combine original and reversed frames manually for that).
  • Since re-encoding still goes through this category's shared 216-color-palette encoder, pixel colors may quantize slightly even though the reversal logic itself doesn't touch them.

Examples

Reversing a 5-frame animation

Input

An animated GIF with frames [A, B, C, D, E] and delays [10, 10, 20, 10, 10] centiseconds

Output

A new animated GIF playing [E, D, C, B, A] with delays [10, 10, 20, 10, 10] centiseconds

The frame order is fully reversed, but each frame keeps its own original delay attached as it moves to its new position, so the slower middle frame is still shown for 20cs, just now third from the end.

Best Practices & Notes

Best Practices

  • Preview the reversed animation before downloading, especially for GIFs where motion direction matters visually.
  • If you want a true boomerang loop (forward then backward), you'll need to manually combine the original and reversed frame sequences with another tool.
  • Combine with gif-flipper if you also want a mirrored appearance alongside the reversed playback.

Developer Notes

reverseGif in gif-reverser.ts mirrors this codebase's existing apng-reverser.ts (PNG category) almost exactly: decode, reverse the frame array with [...frames].reverse(), re-encode with the original loop count. It intentionally does not go through the shared transformGifFrames helper the other 18 tools in this batch use, since there's no per-frame pixel transform involved, just a reordering of already-decoded frames.

GIF Reverser Use Cases

  • Creating a rewind or boomerang-style effect from an existing animation
  • Previewing a process (unfolding, filling, building) played in reverse
  • Producing a backward-playing variant of an animated GIF for creative or comedic effect

Common Mistakes

  • Expecting a single reversal to produce a forward-then-backward boomerang loop; it only reverses the order, it doesn't append the original frames back on.
  • Assuming frame timing gets redistributed evenly after reversing; each frame keeps its own original duration, it just moves to a new position.

Tips

  • Reverse first, then apply any geometric transform (crop, resize, etc.) afterward if you want both effects, or vice versa; order between the two doesn't matter for the final visual result.
  • If the reversed animation looks too fast or slow in places, that reflects the original per-frame delays, now in reverse order, not a new timing issue introduced here.

References

Frequently Asked Questions