What happens if the two GIFs have different numbers of frames?

The output has as many frames as the longer GIF. The shorter GIF's frame sequence simply loops (wraps back to its first frame) to fill in the remaining frames, rather than stretching or freezing on its last frame.

Whose frame delays does the combined GIF use?

The background GIF's delays, frame by frame. The overlay GIF's own timing isn't preserved independently since both layers are merged into one shared frame sequence.

Can I position the overlay anywhere, including partially off-canvas?

Yes, you set an x/y pixel offset for the overlay's top-left corner. Any part of the overlay that falls outside the background's canvas is simply clipped, not wrapped or resized.

How is transparency handled?

The overlay is composited using standard alpha-over blending, so semi-transparent overlay pixels blend proportionally with whatever's beneath them, and fully transparent overlay pixels leave the background untouched.

GIF Compositor - Overlay One GIF on Another

Overview

Introduction

Layering two animations together, like a reaction sticker over a background loop, needs per-frame compositing rather than just placing two files side by side. This tool merges two GIFs into one, with the overlay's transparency respected at every frame.

Both files are decoded, composited, and re-encoded entirely in your browser.

What Is GIF Compositor?

A two-input GIF compositor: you upload a background GIF and an overlay GIF, choose a pixel offset for the overlay, and the tool merges both animations frame by frame into one new GIF.

It uses standard alpha-over compositing, the same blending rule browsers and image editors use for layering semi-transparent content.

How GIF Compositor Works

Both GIFs are decoded into fully composited RGBA frames. The output frame count is the longer of the two GIFs' frame counts; whichever GIF is shorter has its frame index wrapped with modulo arithmetic so it loops to fill the remaining frames.

For each output frame, the overlay frame is alpha-composited onto the background frame at the chosen offset, clipping any part that falls outside the background's canvas, and the result is re-encoded with the background's frame delays and loop count.

When To Use GIF Compositor

Use it to layer a small animated reaction, badge, or effect on top of a longer background animation.

Use it to combine two independently-created GIF loops into a single composited file rather than juggling two separate assets.

Often used alongside GIF-on-Image Compositor, Image-on-GIF Compositor and Two-GIF Cross-Fader.

Features

Advantages

Respects the overlay's transparency with proper alpha-over blending rather than a flat opaque paste.
Automatically handles mismatched frame counts by looping the shorter GIF instead of failing.
Position is fully adjustable via a simple pixel offset.

Limitations

The overlay's own frame timing isn't preserved independently: every output frame uses the background's delay.
Looping the shorter GIF by frame count (not by elapsed time) means playback speed differences between the two source GIFs aren't reconciled.
The overlay is placed at a fixed offset for the whole animation; it doesn't move or track anything across frames.

Examples

Overlaying a 4-frame badge on an 12-frame background

Input

Background GIF: 12 frames. Overlay GIF: 4 frames. Offset: x:10, y:10.

Output

A 12-frame combined GIF where the overlay's 4 frames repeat three times (looped) across the background's 12 frames.

The output always matches the longer GIF's frame count; the shorter overlay simply wraps around via modulo indexing.

Best Practices & Notes

Best Practices

Use an overlay GIF with genuine transparency (not a solid rectangular background) so the composite looks layered rather than boxy.
Match the two GIFs' approximate frame rates if you want their motion to feel synchronized, since delays aren't reconciled automatically.
Double-check the offset keeps the overlay's important content within the background's canvas bounds.

Developer Notes

The alpha-over `compositeOver` helper this tool defines is reused directly by both `gif-on-image-compositor.ts` and `image-on-gif-compositor.ts`, so all three compositing tools in this category share one tested blending implementation.

GIF Compositor Use Cases

Layering a small animated sticker or reaction over a longer background loop
Combining a foreground character animation with a separate background animation
Building a composited GIF from two independently produced animated assets

Common Mistakes

Uploading an overlay GIF that isn't actually transparent, resulting in it fully covering the background like a solid rectangle.
Assuming the overlay's own frame delays are preserved: the combined output always follows the background's timing.

Tips

If the overlay's loop feels out of sync, try trimming or padding the source GIFs so their frame counts divide evenly.
Preview both source GIFs individually first so you know their canvas sizes before picking an offset.

GIF Compositor