Add Lottie

Use composition.addLottie() to add a Lottie animation layer to a composition.

composition.addLottie() signature

addLottie(
  options:LottieOptions,
  config?:LottieLayerConfig
): Promise<Lottie>

Options

Any Lottie JSON, for example:

{
  "v": "4.8.0",
  "meta": { "g": "LottieFiles AE ", "a": "", "k": "", "d": "", "tc": "" },
  "fr": 30,
  "ip": 0,
  "op": 90,
  "w": 1920,
  "h": 1080,
  "nm": "Comp 1",
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 4,
      "nm": "Shape Layer 1",
      "sr": 1,
      "ks": {
        "o": { "a": 0, "k": 100, "ix": 11 },
        "r": { "a": 0, "k": 0, "ix": 10 },
        "p": { "a": 0, "k": [960, 540, 0], "ix": 2 },
        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ty": "rc",
              "d": 1,
              "s": { "a": 0, "k": [1920, 1080], "ix": 2 },
              "p": { "a": 0, "k": [0, 0], "ix": 3 },
              "r": { "a": 0, "k": 0, "ix": 4 },
              "nm": "Rectangle Path 1",
              "mn": "ADBE Vector Shape - Rect",
              "hd": false
            },
            {
              "ty": "gf",
              "o": { "a": 0, "k": 100, "ix": 10 },
              "r": 1,
              "bm": 0,
              "g": {
                "p": 3,
                "k": {
                  "a": 1,
                  "k": [
                    {
                      "i": { "x": 0.833, "y": 0.833 },
                      "o": { "x": 0.167, "y": 0.167 },
                      "t": 0,
                      "s": [
                        0, 0.525, 0.89, 0.808, 0.522, 0.671, 0.896, 0.727, 1,
                        0.816, 0.902, 0.647
                      ]
                    },
                    {
                      "i": { "x": 0.833, "y": 0.833 },
                      "o": { "x": 0.167, "y": 0.167 },
                      "t": 48,
                      "s": [
                        0, 1, 0.867, 0.58, 0.522, 0.99, 0.702, 0.531, 1, 0.98,
                        0.537, 0.482
                      ]
                    },
                    {
                      "t": 90,
                      "s": [
                        0, 0.525, 0.89, 0.808, 0.522, 0.671, 0.896, 0.727, 1,
                        0.816, 0.902, 0.647
                      ]
                    }
                  ],
                  "ix": 9
                }
              },
              "s": { "a": 0, "k": [-948, 8], "ix": 5 },
              "e": { "a": 0, "k": [944, 0], "ix": 6 },
              "t": 1,
              "nm": "Gradient Fill 1",
              "mn": "ADBE Vector Graphic - G-Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": { "a": 0, "k": [0, 0], "ix": 2 },
              "a": { "a": 0, "k": [0, 0], "ix": 1 },
              "s": { "a": 0, "k": [100, 100], "ix": 3 },
              "r": { "a": 0, "k": 0, "ix": 6 },
              "o": { "a": 0, "k": 100, "ix": 7 },
              "sk": { "a": 0, "k": 0, "ix": 4 },
              "sa": { "a": 0, "k": 0, "ix": 5 },
              "nm": "Transform"
            }
          ],
          "nm": "Rectangle 1",
          "np": 3,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 120,
      "st": 0,
      "bm": 0
    }
  ],
  "markers": []
}

Lottie layer configuration

The config argument supports the following layer configuration properties:

• Position
• Size
• Timeline
• Transitions
• Trim

Lottie class

Calling composition.addLottie() returns an instance of the Lottie class, which allows you to read/update its layer options and read/update its layer configuration through getters/setters.

Reading and updating layer options

lottie.type; // "lottie"


const lottieJson = {...};
lottie.setAnimationData(lottieJson)
lottie.animationData; // lottieJson

Examples

Minimal

const lottieJson = {...}
composition.addLottie(lottieJson);

Output

All layer configuration

const lottieJson = {...};


composition.addLottie(lottieJson, {
  position: {
    x: 860,
    y: 290,
  },
  size: {
    height: 500,
    width: 200,
  },
  timeline: {
    start: 1,
  },
  trim: {
    start: 0,
    end: 10,
  },
});

Output

Method Chaining Approach

const lottieJson = {...};
const lottie = composition.addLottie(lottieJson);


lottie


  // Position
  .setIsRelative(true)
  .setX(860)
  .setY(290)


  // Size
  .setHeight(500)
  .setWidth(200)


  // Timeline
  .setStart(15)


  // Trim
  .setTrim(0, 20);

Output