What happens to content that gets pushed off an edge?

By default it's simply dropped, and the newly vacated area on the opposite side is left transparent. Turn on wrap mode to have that content reappear on the opposite edge instead.

Can I shift in a negative direction?

Yes, negative dx moves content left, negative dy moves content up; positive values move right and down.

Does the canvas size change?

No. The shift keeps the same canvas dimensions throughout; it only moves where the existing content sits within that canvas.

Is the shift amount the same for every frame?

Yes, the same (dx, dy) offset and wrap setting apply identically to every frame, so the whole animation shifts together.

GIF Shifter - Shift Every Frame's Pixels by (dx, dy)

Overview

Introduction

Sometimes an animated GIF's content just needs to slide over, whether to recenter a subject or create a scrolling/looping-pan effect. This tool shifts every frame by the same pixel offset.

The GIF is decoded, every frame is translated, and a new animated GIF is re-encoded from the shifted frames, entirely in your browser.

What Is GIF Shifter?

A client-side tool that translates every frame of an animated GIF by a chosen (dx, dy) pixel offset, with a choice between dropping content that moves past an edge (leaving transparency behind) or wrapping it around to the opposite edge.

The canvas size never changes; only the position of the existing pixel content within it does.

How GIF Shifter Works

For each output pixel, the tool works backward: it looks up the source pixel at (x - dx, y - dy). If wrap mode is off and that source position falls outside the canvas, the output pixel is left transparent; if wrap mode is on, the coordinate is wrapped modulo the canvas dimensions instead.

This runs identically on every decoded frame, then all shifted frames are re-encoded into a new GIF with their original delays intact.

When To Use GIF Shifter

Use it to recenter a subject that's off-position in every frame of a GIF, or to nudge an animation's alignment before combining it with another asset.

With wrap mode on, it's also a quick way to create a continuously scrolling/panning tiled-pattern effect from a seamless-edge source GIF.

Often used alongside GIF Canvas Size Changer, GIF Cropper and GIF Flipper.

Features

Advantages

Applies one consistent offset to every frame, keeping the whole animation aligned.
Wrap mode lets you build seamless scrolling effects from tileable source content.
Runs entirely client-side; nothing you upload leaves your browser.

Limitations

The offset is fixed across the whole animation; it can't track or follow a moving subject.
Without wrap mode, content shifted off one edge is permanently lost, not just hidden, once re-encoded.

Examples

Recentering an off-position animated logo

Input

A 300x200 animated GIF with its logo sitting 15px too far left, dx = 15, dy = 0, wrap = off

Output

The same animation with the logo shifted 15px right in every frame, and a transparent 15px strip on the left

Every frame's content moves right by 15 pixels, and the newly exposed left edge is left transparent since wrap mode is off.

Best Practices & Notes

Best Practices

Use wrap mode only with content designed to tile seamlessly at its edges, otherwise the wrapped edge will look visibly discontinuous.
Preview the result before downloading, especially near the canvas edges where content may now be transparent.
Combine with gif-canvas-size-changer afterward if you'd rather crop away the newly transparent area than leave it.

Developer Notes

shiftGif in gif-shifter.ts mirrors png-shifter.ts's inverse-lookup translation exactly, applied per decoded GIF frame via the shared transformGifFrames helper, with the same default of leaving vacated edges transparent rather than wrapping.

GIF Shifter Use Cases

Recentering a subject that sits off-position throughout an animated GIF
Building a seamless scrolling/panning effect from a tileable source animation with wrap mode
Nudging alignment before layering a GIF over another asset at a fixed position

Common Mistakes

Enabling wrap mode on content that isn't seamlessly tileable, producing a visible seam at the wrap boundary.
Forgetting that shifted-off content is dropped permanently (without wrap) rather than recoverable later.

Tips

If you only need to move content a little, small offsets (a handful of pixels) are usually enough to fix minor misalignment.
For a bigger repositioning that also changes canvas size, consider gif-canvas-size-changer instead.

GIF Shifter