I have a lottie file I am trying to use in my react app, what I would like to do is dynamically inject API Data into the lottie file (two logos coming from an endpoint). I have been searching for ways to do this and I can not find a concrete way. Has anyone ever tried to take specific data from an API and dynamically inject it into a lottie file?
Tried react-lottie but it has breaking changes with anything over React 16. Also attempted lottie-react, but there is no prop to pass specific data to be injected into the lottie file.
to be more detailed, I have two circles in the animation that move around the screen, I would like to put two logos into those circles. In the assets array of my lottie file, here is the two objects I would like to manipulate, keep in mind the assets array has 40+ objects inside
{
"id": "comp_1",
"nm": "Logo 1",
"fr": 30,
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "Logo 1 Placeholder.png",
"cl": "png",
"hd": true,
"refId": "image_0",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
400,
400,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
400,
400,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
85,
85,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"ip": 0,
"op": 600,
"st": 0,
"bm": 0
}
]
},
{
"id": "comp_2",
"nm": "Logo 2",
"fr": 30,
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "Logo 2 Placeholder.png",
"cl": "png",
"hd": true,
"refId": "image_0",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
400,
400,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
400,
400,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
85,
85,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"ip": 0,
"op": 600,
"st": 0,
"bm": 0
}
]
},
NOTE: I use JavaScript to handle dynamic interactions with Lottie.
This will work only if the logos are png or jpeg or similar format
Yes, you can unless the recieved API data as logo file must be either base64 format or the link to the file location.
For more detail check the sample JSON file I created. What you can do dynamically is, after the page loaded or the Lottie file rendered as SVG, access the assets properties or array and then inner values,
p, stands for picture (my guess) whose value can be dynamically changed and the value must be in the base64 format.u stands for url and its value can be set to the file location as linkIn case if your JSON file doesn't include the assets property or array, you can copy from here and paste it into your JSON file. After pasting make changes to the values of
w stands for width and h stands for height to as per the logo dimensions.Lastly if that doesn't work then finally you can update image data herexlink:href= in SVG when its rendered-on web browser. Check the SVG code below the JSON code
{
"v": "5.12.1",
"fr": 30,
"ip": 0,
"op": 60,
"w": 1080,
"h": 1080,
"nm": "LottieDynamic",
"ddd": 0,
"assets": [
{
"id": "image_0",
"w": 2032,
"h": 2033,
"u": "",
"p": "data:image/png;base64, ......",
"e": 1
}
],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "#insta.png",
"ln": "insta",
"cl": "png",
"refId": "image_0",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 1,
"k": [
{
"i": {
"x": [
0.667
],
"y": [
1
]
},
"o": {
"x": [
0.333
],
"y": [
0
]
},
"t": 0,
"s": [
0
]
},
{
"t": 60,
"s": [
360
]
}
],
"ix": 10
},
"p": {
"a": 0,
"k": [
540,
540,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
1016,
1016.5,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
36,
36,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"ip": 0,
"op": 60,
"st": 0,
"bm": 0
}
],
"markers": [],
"props": {}
}
SVG code
<svg width="1080" height="1080" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="instaSVG">
<rect id="insta 1" width="719.646" height="720" fill="url(#pattern0)" />
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_702_3" transform="scale(0.000492126)" />
</pattern>
<image id="instImage" data-name="insta.png" width="2032" height="2033"
xlink:href="data:image/png;base64,...." />
</defs>
</svg>