Lottie-web: [QUESTION] About templating

[loretoparisi]

Supposed to have a set of AE animations, is there any way to load them a template engine so that expressions can be handled at run time?

According to the docs I could start using TextLayer.updateDocumentData to update the text at run time:
https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData

So assumed to have a text animation, I would use an expression to change the text, while using the same animation template.

[bodymovin]

Hi, I'm not sure if I follow exactly what you need. But does updateDocumentData work for your case?

[loretoparisi]

@bodymovin so it actually works and it is awesome!
This is my snippet inspired to a previous issue

function UpdateGraphics(anim) {
        /**
            t: text value
            s: font size
            fc: fill color - array with RGB values ranging from 0 to 1
            lh: font line height
            sc: stroke color - array with RGB values ranging from 0 to 1
            j: justify
        */
        anim.renderer.elements[0].updateDocumentData({ t: 'Hello World!', s: 24, fc: [0.5, 0.5, 1] }, 0);
    }//UpdateGraphics
    function CreateGraphics() {
        return new Promise((resolve, reject) => {
            $.getJSON('data.json', (animationData) => {
                const elem = document.getElementById('lottie');
                const animData = {
                    container: elem,
                    renderer: 'svg',
                    loop: true,
                    autoplay: true,
                    rendererSettings: {
                        clearCanvas: false,
                        progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
                        hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
                    },
                    animationData: animationData
                };
                let anim = lottie.loadAnimation(animData);
                resolve(anim);
            })
        });
    }//CreateGraphics
    CreateGraphics()
        .then(anim => {
            UpdateGraphics(anim);
        });

Now my aim is
1) to apply the replacement before running the animation, so that I can change the whole text from a placeholder text (coming from AES just to render the animation). Is that possibile? Maybe using autoplay and some run api?
2) Generally, I would turn this into a parser so that I could take the animationData input, parse it (like it would be a generic template), apply the changes (like the actual text, but others maybe like: colors, animations effects settings, etc), and then save the json output.
3) I could the re-run this json somewhere else as a custom animation from that template (with specific parameters applied to it).

Thank you.

[bodymovin]

Yes, the best approach is to load the animationData, traverse it to find the properties you want to update, and then pass it to lottie.
If you want to update the properties after the animation has been loaded, you can use the lottie-api library
https://github.com/bodymovin/lottie-api

[loretoparisi]

@bodymovin thank you I was thinking to a common parser api to traverse the animationData instead of modifying "by hand", so that to avoid any possibile typos or unsupported changes for a certain object type, like modifying a TextLayer manually etc.

I will have a look at the api then. In the meanwhile I have put the ongoing project here:
https://github.com/loretoparisi/lottie-adobe-after-effects-json-animation

In this example I would like to change animation speed as well:

anim.renderer.elements[0].updateDocumentData({
            t: 'This is keyframe 0', 
            s: 78, 
            fc: Palette.color() 
        }, 0);
        anim.renderer.elements[0].updateDocumentData({
            t: 'This is keyframe 1', 
            s: 78, 
            fc: Palette.color() 
        }, 1);

(https://github.com/loretoparisi/lottie-adobe-after-effects-json-animation/blob/master/js/app.js#L252)

Using the TextLayer.updateDocumentData I can change the keyframes 💯 , but how about other properties, can do this with the lottie-api?

Thank you!

[bodymovin]

@loretoparisi yes, you should be able to modify most of the properties with lottie-api

[loretoparisi]

@bodymovin thanks in advance for your help. Two question
1) How to reload animation after changes for "manual" changes. When using your updateDocumentData animation get the changes, but when modifying manually the animation, how can apply the changes so that the loaded animation will get it?

Here I change all text value of a SVGCompElement to a certain value, but after that the animation when called play is still showing the previous data:

anim.renderer.elements[0].layers = 
            anim.renderer.elements[0].layers.map(layer => {
                if(layer&&layer.nm) layer.nm="X"
                return layer;
        });

Or directly tap into the animationData:

$.getJSON(dataPath, (animationData) => {
                animationData.assets[0].layers = 
                    animationData.assets[0].layers.map(layer => {
                        if(layer&&layer.nm) layer.nm="X"
                        return layer;
                });
                console.log("lotties: animationData", animationData);

In both cases I cannot get the animation loaded to be updated. The example was taken from lottiefiles here.

2) Serialize back to JSON
As soon as I modify the properties with lottie-api, how can I serialize the animation back to JSON?
My aim is then to re-load the saved animation with all changes in place.

Thank you very much.

[bodymovin]

Hi, unfortunately, you can't serialize it back to JSON since the lottie-api updates values dynamically and doesn't generate a new serializable JSON object.