Lottie-web: Possible to update textlayers?

[christianeide]

Hi,

Im trying to update the text in a textlayer after I have created the element with bodymovin.loadAnimation. If I try to simply update the animationData-object on the animation, it wont update. I can see that the object in developertools is updated, but this will not cause a rerender of the text onscreen. I have also tried to destroy the animation and recreate the object, but this wont work ether. So this will not work to update text, only to set it initially before calling loadAnimation:

anim.animationData.layers[0].t.d.k[0].s.t = 'RandomText';

I can see that you are doing something similar in this example on Codepen, and I can recreate your example locally. But I still cant update the text of my composition. Is there anything special about text? The text is exported from AE as text and not shapes.

I can give more complex code examples if needed.

[christianeide]

So I am a little bit closer. After reading different cases here on GitHub, I understand that you have to have keyframes on values that should change. So now I have put keyframes on both position and Source Text. I can now update the position, but not the Source Text. Is it possible to update the Source Text?

[bodymovin]

Since Text keyframes are Hold keyframes, they are not interpolated, so until it reaches that keyframe, the text won't be updated.
You can modify the keyframe starting value together with the text in order for it to work.
Let me know if it helps.

[christianeide]

Sorry, but I can still not get this to work.

This is my code:

let anim;

function UpdateGraphics() {
  anim.animationData.layers[0].t.d.k[0].s.t = 'Text2';
  anim.animationData.layers[0].t.d.k[1].s.t = 'Text2';
}

function CreateGraphics() {
  $.getJSON('bodymovin/test2.json', (animationData) => {

    animationData.layers[0].t.d.k[0].s.t = 'RandomText';
    animationData.layers[0].t.d.k[1].s.t = 'RandomText';

    const elem = document.getElementById('supring');
    const animData = {
      container: elem,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      rendererSettings: {
        progressiveLoad: false
      },
      animationData,
    };

    anim = bodymovin.loadAnimation(animData);
  });

}

So the CreateGraphics works as expected. But I cant get UpdateGraphics to work. Is there anything other than updating the keyframes textvalue I need to do?

.json attached

test2.json.zip

[bodymovin]

closing issue. Reopen if needed.

[ssanthos]

@christianeide were you able to get it to work? I'm working on something similar, so was curious.

[christianeide]

@ssanthos No, never managed to make it work, so I gave up bodymovin for now.

[bodymovin]

@ssanthos @christianeide I've added a method "updateDocumentData" that allows updating text during animation.
More here
https://github.com/bodymovin/bodymovin/wiki/TextLayer.updateDocumentData

[ssanthos]

Superb! Also, great to know that support to update more properties are coming in the future.

[christianeide]

Thanks a lot @bodymovin! Will be trying this out soon!

[InstantArcade]

Just a little more info on this for people still struggling (like I was)
updateDocumentData() works, but needs to be called on an TextElement, so instead of

animData.layers[n].layers[m].t.d.k[0].s.t
Instead, look at the renderer's elements arrays

e.g.
anim.renderer.elements[0].elements[4].updateDocumentData({t:"BOB"})
It helps to use the console and dig through anim.renderer.elements[n] to make sure you're calling it on a TextElement (in my case SVGTextElement because I'm using the SVG renderer.

NOTE: You won't see the effect until you next render a frame (which is automatic if your anim is playing), if not you can call anim.renderer.renderFrame(frameNumber) to force it, however, it still won't update if you're already on that frame, so choose a different one.