Export Animation

Overview

Animation exports are timeline-based and return Blob values that can be uploaded or downloaded.

UI Workflow

  1. Select an object and configure at least one timeline track in the Animation section.
  2. In the same section, use Export GIF, Export WebP, or Export MP4.
  3. The editor downloads the exported file using the timeline id as filename.

API

const gif = await editor.exportAnimationAsGIF(timelineId, {
  fps: 24,
  width: 1280,
  height: 720,
})

const webp = await editor.exportAnimationAsWebP(timelineId, {
  fps: 30,
  width: 1280,
  height: 720,
})

const mp4 = await editor.exportAnimationAsMP4(timelineId, {
  fps: 30,
  width: 1920,
  height: 1080,
})

Notes

  • fps defaults to timeline.fps, then manager default.
  • width, height, and backgroundColor are applied when each frame is rendered.
  • Export emits animation:export-complete on success.
  • Exports use a real encoder pipeline.
  • In Node.js runtime, the manager can use ffmpeg as fallback encoder.
  • In this Nuxt app, browser exports use the server API /api/animation/encode by default.
  • In custom browser runtimes without that API, provide exportEncoder via editor.animation.configureRuntime(...).

Limits and Failure Modes

  • Requests are rejected if fps, frame count, width/height, or pixel count exceed configured limits.
  • Export rendering/encoding has timeout protection and fails with explicit timeout messages.
  • Server-side encode requests are queued with concurrency limits to protect ffmpeg resources.
  • When overloaded or timed out, API returns actionable error responses instead of hanging.