Skip to content
Apexify.jsDocs
Apexify.js version v5.4.5

Generate a two-frame GIF

Executable example · advanced

Generate a two-frame GIF

Generate a tiny server-side GIF from two Apexify canvas frames and verify its GIF structure.

✓ VerifiedRuntime: nodeapexify.js

Prerequisites

  • Node.js 22, 24, or 26
  • apexify.js 6.0.0

Authoritative source

SOURCEtypescript
typescript
Studio
import { mkdir, writeFile } from 'node:fs/promises';import { join } from 'node:path';import { ApexPainter } from 'apexify.js'; const outputDir = process.env.APEXIFY_EXAMPLE_OUTPUT_DIR;if (!outputDir) throw new Error('APEXIFY_EXAMPLE_OUTPUT_DIR is required.'); const painter = new ApexPainter({ type: 'buffer' });const first = await painter.createCanvas({ width: 96, height: 64, colorBg: '#312e81' });const second = await painter.createCanvas({ width: 96, height: 64, colorBg: '#be185d' });const gif = await painter.createGIF(  [    { buffer: first.buffer, duration: 120 },    { buffer: second.buffer, duration: 120 },  ],  { outputFormat: 'buffer', width: 96, height: 64, repeat: -1, quality: 20, skipResizeWhenDimensionsMatch: true },);if (!Buffer.isBuffer(gif)) throw new Error('Expected createGIF({ outputFormat: buffer }) to return a GIF Buffer.'); await mkdir(outputDir, { recursive: true });await writeFile(join(outputDir, 'animation.gif'), gif);await writeFile(join(outputDir, 'poster.png'), first.buffer);console.log(JSON.stringify({ example: 'node.gif.basic', format: 'gif', width: 96, height: 64, bytes: gif.length, frames: 2 }));

Source hash: 609a9b8654f7cb2e819f8d81bc4801369625e8bdf3f522346bc281602cdcd7a8. The displayed payload is generated from the files executed by DOC-5 verification.

Verified output · poster.png
Generate a two-frame GIF verified output
96 × 64 · metadata verification
Show verified animationGenerate a two-frame GIF animated GIF output

Goal

Prove the current server-side GIF encoder using small deterministic local frames.

Important options

  • outputFormat
  • width
  • height
  • repeat
  • quality

Why these choices

  • Buffer output keeps verification inside the fixture.
  • Small dimensions and two frames keep CI cost bounded.
  • The Gallery uses the verified poster by default so reduced-motion users are not forced to watch animation.

Variants

  • Increase frame count or use generated-frame mode for real animation workflows.

Performance note

GIF encoding is heavier than a single PNG, so the completion example is intentionally tiny.

Error note

Missing frame data, invalid dimensions, or frame-limit violations fail the run.

Related documentation

Related API

Next steps

Use production-sized inputs only after measuring frame count, dimensions, and encoding quality.

Next steps