This library can be used to render Lottie animations with modifications (use animations as templates, allow users to make changes and render the result).
It would be useful to add this to the examples. I don't have any such animations that I can legally use, so contributions are welcome.
I'm not aware about any official API to replace images. I have been able to use something like this (where data is an object literal containing the data.json-structure):
// Map of readable names
const paths = {file: 'p', folder: 'u', preserveAspectRatio: 'pr'};
// Filter out images
const images = (data.assets || []).filter(asset => asset[paths.folder]); // Only images have folders
// Change image path to empty string since we've flattened the folder structure
images.forEach(asset => {
asset[paths.folder] = ''; // Set folder to the same directory as data.json
asset[paths.file] = '/path/to/new/image'; // Override image
asset[paths.preserveAspectRatio] = 'xMidYMid meet'; // "Contain" image, See https://github.com/airbnb/lottie-web/issues/1046
});
Note that this code is taken out of context and untested.
This library can be used to render Lottie animations with modifications (use animations as templates, allow users to make changes and render the result).
It would be useful to add this to the examples. I don't have any such animations that I can legally use, so contributions are welcome.
More info about how to replace content:
For texts, this is documented here: https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData
I'm not aware about any official API to replace images. I have been able to use something like this (where
data
is an object literal containing the data.json-structure):Note that this code is taken out of context and untested.
Possible animation which can be used: https://lottiefiles.com/53085-airplane-animation