Layer types
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:
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);