Playback and GIF Export

Playback Controls

The Preview panel provides:

Play
Pause

These controls become available after a GIF is loaded successfully.

Play

Click Play to start animation playback.

The preview cycles through the decoded frames.

Each frame is drawn with its current text settings.

The playback loop repeats when it reaches the last frame.

Pause

Click Pause to stop playback.

Selecting a timeline frame also stops playback.

Frame Timing

GIF Ops reads frame durations from the uploaded GIF.

During playback, it schedules the next frame using the stored delay.

Frame delays shorter than 10 milliseconds or missing delays may have been normalized to 100 milliseconds during decoding.

Frame Timeline

As playback proceeds, GIF Ops updates the selected frame highlight.

You can click a thumbnail to stop playback and inspect a particular frame.

Editor Detail

The playback loop advances the displayed frame, but it does not automatically synchronize the right-hand Text & Style form after each playback step.

For accurate editing, pause playback and select the frame you want to change.

Rendering the Final GIF

Click:

Render & Download GIF

This starts the GIF export process.

Rendering Workflow

GIF Ops:

Creates a canvas for each frame.
Draws the original frame image.
Draws the corresponding text overlay.
Converts each composed frame into a PNG data URL.
Calculates a timing interval from the frame delays.
Repeats frame images as necessary to approximate the original timing.
Passes those images to gifshot.
Downloads the generated GIF.

GIF Encoder

The supplied implementation uses:

/gifshot.js

The application expects the global gifshot.createGIF function to be available.

If the library is missing, rendering cannot proceed.

Render Progress

While exporting, the button displays a rendering status.

Example:

Rendering… 65%

When rendering finishes successfully, GIF Ops triggers a browser download.

Output Filename

The current implementation downloads the exported animation as:

gifhub.gif

The filename is fixed in the source and is not derived from the original uploaded filename.

GIF Dimensions

The encoder receives the dimensions of the uploaded GIF.

Example:

480 × 270

GIF Ops does not currently expose a resize setting for the exported animation.

Frame Timing During Export

GIF Ops attempts to preserve the relative timing of original frames.

However, the encoder is supplied with repeated frame images and a common frame duration.

How It Works

The renderer calculates the greatest common divisor of decoded frame delays.

For example:

Frame 1: 100 ms
Frame 2: 200 ms
Frame 3: 100 ms

The common interval is:

100 ms

Frame 2 is represented by repeating its composed image twice.

Important Limitation

This is a timing approximation strategy, not exact preservation of the original GIF frame structure.

The resulting GIF may contain more encoded frames than the source.

Unusual frame delays can result in substantial frame repetition and longer rendering times.

GIF Color Limitations

Animated GIF is a palette-based image format.

During encoding, source colors may be quantized.

Consequently:

color gradients may change
subtle transparency may render differently
text edges may appear less smooth
file size may increase or decrease
the output may not perfectly match the canvas preview

These differences arise from GIF encoding and browser rendering behavior.

Rendering Performance

Rendering cost depends on:

source dimensions
number of frames
text drawing
repeated frames required for timing
browser memory
encoder performance

Large or long GIFs can be slow to export.

Encoder Settings

The application passes settings including:

{
  numWorkers: 2,
  sampleInterval: 10
}

These are parameters supplied to the gifshot encoder.

The supplied source does not expose them through the GIF Ops interface.

Rendering Errors

Missing gifshot

The application displays an error when the encoder is unavailable.

Encoding Failure

If gifshot reports an error, GIF Ops displays:

gifshot failed to encode.

Unexpected Failure

Other rendering exceptions produce:

Rendering failed.

Export Recommendations

Keep GIF dimensions moderate.
Avoid extremely large frame counts.
Verify that exported timing is acceptable.
Test exported text legibility.
Preserve the original GIF separately.
Use JSON export to save styling work.

Important: GIF Ops preserves decoded frame order and attempts to reproduce timing, but it does not guarantee byte-for-byte preservation or exact reproduction of the original encoded animation.