packages/docs/docs/lottie/getlottiemetadata.mdx
Part of the @remotion/lottie package.
Using this function, you can get the basic metadata such as dimensions, duration and framerate of a Lottie animation.
// @allowUmdGlobalAccess
// @filename: animation.ts
export const animationData = {
v: "5.9.6",
fr: 29.9700012207031,
ip: 0,
op: 90.0000036657751,
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: 1,
k: [
{
i: { x: [0.833], y: [0.833] },
o: { x: [0.167], y: [0.167] },
t: 0,
s: [360],
},
{ t: 58.0000023623884, s: [0] },
],
ix: 10,
},
p: {
a: 1,
k: [
{
i: { x: 0.833, y: 0.833 },
o: { x: 0.167, y: 0.167 },
t: 0,
s: [979.401, 1368, 0],
to: [0, -138, 0],
ti: [0, 138, 0],
},
{ t: 58.0000023623884, s: [979.401, 540, 0] },
],
ix: 2,
l: 2,
},
a: { a: 0, k: [517.365, 112.096, 0], ix: 1, l: 2 },
s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
ty: "rc",
d: 1,
s: { a: 0, k: [425.883, 425.883], ix: 2 },
p: { a: 0, k: [0, 0], ix: 3 },
r: { a: 0, k: 98, ix: 4 },
nm: "Rectangle Path 1",
mn: "ADBE Vector Shape - Rect",
hd: false,
},
{
ty: "st",
c: { a: 0, k: [1, 1, 1, 1], ix: 3 },
o: { a: 0, k: 100, ix: 4 },
w: { a: 0, k: 2, ix: 5 },
lc: 1,
lj: 1,
ml: 4,
bm: 0,
nm: "Stroke 1",
mn: "ADBE Vector Graphic - Stroke",
hd: false,
},
{
ty: "fl",
c: { a: 0, k: [0, 0.468933612108, 1, 1], ix: 4 },
o: { a: 0, k: 100, ix: 5 },
r: 1,
bm: 0,
nm: "Fill 1",
mn: "ADBE Vector Graphic - Fill",
hd: false,
},
{
ty: "tr",
p: { a: 0, k: [494.618, 123.481], 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 2",
np: 3,
cix: 2,
bm: 0,
ix: 1,
mn: "ADBE Vector Group",
hd: false,
},
],
ip: 0,
op: 90.0000036657751,
st: 0,
ct: 1,
bm: 0,
},
{
ddd: 0,
ind: 2,
ty: 1,
nm: "White Solid 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, l: 2 },
a: { a: 0, k: [960, 540, 0], ix: 1, l: 2 },
s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
},
ao: 0,
sw: 1920,
sh: 1080,
sc: "#ffffff",
ip: 0,
op: 90.0000036657751,
st: 0,
bm: 0,
},
],
markers: [],
};
// @filename: Animation.tsx
import { animationData } from "./animation";
// ---cut---
import { getLottieMetadata } from "@remotion/lottie";
// animationData is a JSON object, can be imported from a .json file, remote file or using staticFile()
const metadata = getLottieMetadata(animationData);
/*
{
durationInFrames: 90,
durationInSeconds: 3.0030030030030037,
fps: 29.9700012207031,
height: 1080,
width: 1920,
}
*/
The function takes one argument, a JavaScript object that adheres to the Lottie schema.
If the metadata cannot be parsed, this function returns null.
If the metadata can be parsed, it returns an object with the following properties:
heightThe natural height of the animation in pixels.
widthThe natural width of the animation in pixels.
durationInSecondsThe duration of the animation in seconds, if the fps from this object is used.
durationInFramesThe duration of the animation in frames, if the fps from this object is used.
:::note
This value is rounded down to the closest integer, since Remotion does not support non-integer values for durationInFrames.
:::
fpsThe natural framerate of the Lottie animation.