airbnb/lottie-web · error · Error

Cannot load multiple segments in worker.

Error message

Cannot load multiple segments in worker.

What it means

The worker override of loadNextSegment throws when animationData.segments is a non-empty array AND autoloadSegments is true. The worker build does not implement progressive/multi-segment loading (fetching additional segment files on demand), so segmented assets are rejected rather than loaded incorrectly. The guard at the top of the method returns early (no throw) when segments are absent, empty, or when autoloadSegments is false.

Source

Thrown at player/js/animation/AnimationItemWorkerOverride.js:93

    }
  }
  this.animationData.__complete = false;
  dataManager.completeAnimation(this.animationData);
  this.renderer.includeLayers(data.layers);
  var expressionsPlugin = getExpressionsPlugin();
  if (expressionsPlugin) {
    expressionsPlugin.initExpressions(this);
  }
  this.loadNextSegment();
};

AnimationItem.prototype.loadNextSegment = function () {
  var segments = this.animationData.segments;
  if (!segments || segments.length === 0 || !this.autoloadSegments) {
    this.timeCompleted = this.totalFrames;
    return;
  }
  throw new Error('Cannot load multiple segments in worker.');
};

AnimationItem.prototype.loadSegments = function () {
  var segments = this.animationData.segments;
  if (!segments) {
    this.timeCompleted = this.totalFrames;
  }
  this.loadNextSegment();
};

AnimationItem.prototype.imagesLoaded = null;

AnimationItem.prototype.preloadImages = null;

AnimationItem.prototype.configAnimation = function (animData) {
  if (!this.renderer) {
    return;
  }

View on GitHub (pinned to bede03d25d)

Solutions

1. Set autoloadSegments: false in loadAnimation params so loadNextSegment returns early instead of throwing.
2. Strip the `segments` field from animationData before passing it to the worker build.
3. Fall back to the non-worker canvas build (lottie_canvas.js), which supports segment loading.

Example fix

// before (worker build, segmented data)
lottie.loadAnimation({ renderer: 'canvas', animationData });
// after
lottie.loadAnimation({ renderer: 'canvas', animationData, autoloadSegments: false });

function prepareWorkerAnimationData(animationData) {
  const isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');
  if (isWorker && animationData.segments && animationData.segments.length) {
    // worker build cannot load multiple segments; drop them or disable autoload
    const clone = Object.assign({}, animationData, { segments: undefined });
    return clone;
  }
  return animationData;
}
lottie.loadAnimation({ renderer: 'canvas', animationData: prepareWorkerAnimationData(data), autoloadSegments: false });

function isWorkerSegmentSafe(animationData) {
  const isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');
  return !isWorker || !animationData.segments || animationData.segments.length === 0;
}

When it happens

Trigger: Loading animationData that contains a `segments` array (e.g. exported from After Effects with segmenting enabled) with the default autoloadSegments: true, using the worker build. The throw fires during configAnimation -> loadSegments -> loadNextSegment.

Common situations: Large/progressive Lottie exports split into segments; switching a segmented animation to the worker build for performance; receiving third-party JSON that happens to include segments.

Related errors

• Canvas worker renderer cannot load animation from url
• Only canvas renderer is supported when using worker.
• Cannot set data on wrapper for canvas worker renderer
• Cannot access DOM from worker thread
• The property has no keyframe at index {ind}

AI-assisted analysis of airbnb/lottie-web@bede03d25d (2026-08-13). Data as JSON: /api/errors/e66ace290375cfee. Report an issue: GitHub.