Lottie Web Worker

Using the lottie player on a worker thread and an offscreen canvas.

Sample usage

1. Setting up a new animation

HTML:

<canvas id="a"></canvas>

Javascript:

let offscreenCanvas = document.getElementById('a').transferControlToOffscreen();
let animationData = JSON_LOTTIE_ANIMATION_DATA;

let worker = new Worker('lottie_worker.min.js');
worker.postMessage({
  canvas: offscreenCanvas,
  animationData: animationData,
  drawSize: {
    width: 200,
    height: 100
  }
  params: {
    loop: true,
    autoplay: true
  }
})

2. Updating the size of the canvas

worker.postMessage({
  drawSize: {
    width: 250,
    height: 150
  }
})

3. Pausing the animation

worker.postMessage({
  control: {
    play: false
  }
})

4. Stopping the animation

worker.postMessage({
  control: {
    stop: true
  }
})

Message field description

data: {
  canvas: 'The offscreen canvas that will display the animation.',
  animationData: 'The json lottie animation data.',
  drawSize: {
    width: 'The width of the rendered frame in pixels',
    height: 'The height of the rendered frame in pixels',
  },
  params: {
    loop: 'Set "true" for a looping animation',
    autoplay: 'Set "true" for the animation to autoplay on load',
  },
  control: {
    play: 'Set "true" to play a paused animation or "false" to pause a playing animation',
    stop: 'Set "true" to stop a playing animation. This will clear the canvas',
  }
},

Events fired back to the parent thread

The web worker running the lottie player will send the following events back to its parent thread:

1. ‘initialized’

{
    name: 'initialized',
    success: true/false // True if the animation was successfully initialized.
}

2. ‘playing’

{
    name: 'playing'
}

3. ‘paused’

{
    name: 'paused'
}

4. ‘stopped’

{
    name: 'stopped'
}

5. ‘resized’

{
    name: 'resized',
    size: {
        height: HEIGHT, // Current height of canvas in pixels.
        width: WIDTH    // Current width of canvas in pixels.
    }
}