Editframe

Lottie

Layer configuration

Lottie layers support the following layer configuration properties:

  • Position
  • Size
    Lottie animations retain their aspect ratio when resized and will only resize according to one parameter at a time. If you supply both height and width, only the width will be used to resize the lottie animation. Likewise, using format may produce unexpected results.
  • Timeline
  • Transitions
  • Trim
    Lottie animations will play once by default, but if you set the trim end to longer than the animation's duration, they will loop until the provided end time.

Reading and updating layer options

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

Examples

Minimal

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

Complete layer configuration

const lottieJson = {...};

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

Lottie JSON

{
  "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": []
}