About

Animated GIFs with hard frame cuts produce a jarring, flickering appearance. Cross-fading inserts interpolated transition frames between each original frame pair, blending pixel values by a factor t that sweeps from 0 to 1 across the overlap window. The result is a smoother animation at the cost of increased frame count and file size. This tool performs real binary GIF decoding (LZW decompression), per-pixel alpha blending on the raw RGBA raster, and re-encoding with median-cut color quantization back to a valid GIF89a file. No server upload occurs. All processing runs locally in a Web Worker.

Choosing too many overlap frames relative to your source frame count will collapse distinct keyframes into a continuous morph, losing the original animation's pacing. A good starting point is 2 - 4 overlap frames at 15 - 20 fps. The easing curve controls whether the blend accelerates at the start (ease-in), decelerates at the end (ease-out), or remains uniform (linear). This tool approximates cubic Bézier easing; results may differ slightly from CSS-based easing curves.

Formulas

The cross-fade blend for each pixel at interpolation step k out of n overlap frames between source frame A and frame B:

t = ease(kn + 1)

pixel_out = A_rgba ⋅ (1 − t) + B_rgba ⋅ t

Where k ranges from 1 to n. The easing function maps the linear ratio to a curved value:

{

linear: tease-in: t²ease-out: 1 − (1 − t)²ease-in-out: 3t² − 2t³

Total output frame count F_out for F_src source frames with n overlap frames per transition:

F_out = F_src + n ⋅ (F_src − 1)

Where A_rgba = source pixel RGBA from frame A, B_rgba = source pixel RGBA from frame B, n = number of cross-fade frames inserted per transition, t = normalized blend factor after easing in range [0, 1].

Reference Data

Easing Type	Behavior	Best For	Formula Approximation
Linear	Constant blend rate	Technical / uniform transitions	t = t
Ease-In	Starts slow, accelerates	Dramatic reveals	t²
Ease-Out	Starts fast, decelerates	Settling / landing effects	1 − (1 − t)²
Ease-In-Out	Slow start & end	Most natural-looking fades	Smoothstep: 3t² − 2t³

Source Frames	Overlap	Output Frames	File Size Impact
10	1	19	≈ 1.9×
10	2	28	≈ 2.8×
10	3	37	≈ 3.7×
10	4	46	≈ 4.6×
10	5	55	≈ 5.5×
20	2	58	≈ 2.9×
20	4	96	≈ 4.8×
30	3	117	≈ 3.9×
50	2	148	≈ 3.0×
5	2	13	≈ 2.6×

GIF Spec Field	Bytes	Description
Signature	6	`GIF89a` magic bytes
Logical Screen Descriptor	7	Width, height, color table flags
Global Color Table	3 × 2^N+1	RGB palette entries
Graphic Control Extension	8	Disposal, delay, transparency index
Image Descriptor	10	Position, size, interlace, local table flag
LZW Minimum Code Size	1	Initial code bit width
Image Data Sub-blocks	Variable	LZW-compressed pixel indices
Trailer	1	`0x3B` end marker

Frequently Asked Questions

For each pair of adjacent source frames, the tool inserts exactly n interpolated blend frames. With F_src source frames, there are F_src − 1 transitions, giving a total of F_src + n ⋅ (F_src − 1) output frames. A 10-frame GIF with overlap 3 produces 37 frames. Higher overlap means smoother transitions but larger file sizes.

GIF is limited to 256 colors per frame. The encoder uses median-cut color quantization to select the optimal 256-color palette. Cross-faded frames contain gradient blends that may exceed 256 unique colors, forcing quantization artifacts. For photographic content, this is inherent to the GIF format. Reducing overlap slightly can help because fewer intermediate gradient shades need to be represented.

Ease-in-out (smoothstep: 3t² − 2t³) is generally the most perceptually pleasing because it avoids abrupt changes at both the start and end of the transition. Linear blending can appear mechanical, while ease-in or ease-out alone create asymmetric transitions that feel unbalanced.

Yes. The tool composites each frame onto a full RGBA canvas respecting the GIF disposal method and transparency index before blending. The alpha channel is interpolated alongside RGB. However, the output GIF uses a single transparency index per frame (binary transparency), so semi-transparent intermediate values are rounded to fully opaque or fully transparent at the quantization stage.

The tool accepts GIFs up to 20 MB with a maximum of 500 total output frames. Processing occurs in a Web Worker so the browser tab remains responsive. Very large GIFs (e.g., 300 source frames at 1920×1080) may take 30+ seconds due to per-pixel blending and LZW re-compression.

Before blending, each frame is fully rendered onto a persistent canvas following GIF89a disposal semantics: "Do not dispose" retains previous pixels, "Restore to background" clears the frame area, and "Restore to previous" reverts to the prior state. This ensures the cross-fade operates on the correct composite image rather than raw partial frame data.