Skip to main content

Lottie animations

Use + Lottie JSON above the canvas, or replace the JSON from a selected Lottie layer's Properties. The first supported profile is intentionally deterministic and portable:

  • the Bodymovin/Lottie JSON is embedded in the editable project and exported OGraf module;
  • playback loops continuously, with an editable non-negative speed multiplier;
  • editor scrubbing and non-realtime goToTime() derive the exact Lottie frame from composition time; realtime playback uses the same absolute-time frame calculation;
  • load() predecodes embedded images and waits for fonts and the initial Canvas frame; failures return an error instead of allowing a blank graphic to pass as ready;
  • a positive adapter-owned backing Canvas avoids zero-sized matte buffers and unsafe player resize calls. CSS reframes that backing when the layer box changes;
  • nonzero source in-points are mapped to the player's relative frame API, and changed non-realtime seeks rebuild the player for byte-repeatable output;
  • the self-hosted light canvas player is bundled into main.js, with no CDN dependency;
  • expressions are disabled; external image/font paths, segmented documents, undecodable image payloads, and luma mattes are rejected. Export images inside the JSON as data URIs, use alpha mattes, or convert artwork to shapes/glyphs.

A small compatible animation is included at examples/lottie/pulse.json. Marker control, one-shot playback, dynamic Lottie text/data binding and renderer selection are not supported. Test your exported graphic in the intended playout environment.