Importing Assets

Plugins can import external assets like images and animations into the Lottie Creator scene using scene.import().

Supported formats

Type	Formats	Returns
`LOTTIE`	Lottie JSON (`.json`), dotLottie (`.lottie`)	`SceneLayer`
`SVG`	SVG (`.svg`)	`SceneLayer`
`IMAGE`	PNG, JPEG, WebP	`ImageLayer`

Lottie and SVG imports return a SceneLayer — a layer that references a source scene. Image imports return an ImageLayer.

Importing from a URL

Use ImportFromURL to import assets from a web URL:

// Import a Lottie animation
const animation = await creator.activeScene.import({
  type: "LOTTIE",
  url: "https://example.com/animation.json",
});

// Import an image
const image = await creator.activeScene.import({
  type: "IMAGE",
  url: "https://example.com/image.png",
});

// Import an SVG
const svg = await creator.activeScene.import({
  type: "SVG",
  url: "https://example.com/graphic.svg",
});

Importing from content

Use ImportFromContent to import from raw content (e.g., a Lottie JSON string):

const animation = await creator.activeScene.import({
  type: "LOTTIE",
  content: lottieString,
});

Working with imported layers

Imported layers behave like any other layer in Lottie Creator. You can position, scale, and animate them:

const animation = await creator.activeScene.import({
  type: "LOTTIE",
  url: "https://example.com/animation.json",
});

// Position the layer
animation.position.staticValue = { x: 100, y: 100 };

// Scale the layer
animation.scale.staticValue = { x: 0.5, y: 0.5 };

Example

Importing assets example →