Chevron Down
Table of Contents
Chevron DownGetting Started
Chevron DownAPI Reference

AnimationLoopProxy (Experimental)

This class is experimental. Its API may change between minor releases.

Manages an AnimationLoop that runs on a worker thread.


Create a worker:

// animation-worker.js
import {
  AnimationLoop, _AnimationLoopProxy as AnimationLoopProxy
} from '';

const animationLoop = new AnimationLoop({...});

Use a bundler e.g. Webpack to transpile and bundle animation-worker.js into a file e.g. animation-worker.es5.js. You can then use it as this:

import {_AnimationLoopProxy as AnimationLoopProxy} from '';

new AnimationLoopProxy(new Worker('animation-worker.es5.js')).start();

Static Methods



Returns a function self => {...} that sets up the message handling inside the worker thread when called with a WorkerGlobalScope instance.


constructor(worker: Worker, props : Object)

new AnimationLoopProxy(worker, {
  • worker - a Worker instance using code created from AnimationLoopProxy.createWorker.
  • props.onInitialize (callback) - if supplied, will be called once after first start() has been called, after page load completes and a context has been created.
  • props.onFinalize=null (callback) - Called once when animation is stopped. Can be used to delete objects or free any resources created during onInitialize.
  • props.autoResizeDrawingBuffer=true - If true, checks the canvas size every frame and updates the drawing buffer size if needed.
  • props.useDevicePixels - Whether to use window.devicePixelRatio as a multiplier, e.g. in autoResizeDrawingBuffer etc.

start([options : Object]) : AnimationLoopProxy

Initializes and then (re)starts the animation

  • options.canvas (string | HTMLCanvasElement) - A string containing the id of an existing HTML element or a DOMElement instance. If null or not provided, a new canvas will be created.

stop() : AnimationLoopProxy

Stops the animation


waitForRender() : Promise

Returns a promise which resolves in the next frame after rendering has completed.

const loop = await animationLoop.waitForRender()
// can now read pixels from webgl context

setProps(props: Object) : AnimationLoopProxy

  • props.autoResizeDrawingBuffer - Update the drawing buffer size to match the canvas size before each call to onRenderFrame()
  • props.useDevicePixels - Whether to use window.devicePixelRatio as a multiplier, e.g. in autoResizeDrawingBuffer etc.