Lottie-web: Dynamic text in animation

[henriklied]

Hi there!

Is it possible to alter the text parts of an animation?

I'm planning to use Bodymovin together with the TV graphics rendering engine CasparCG to make dynamic TV graphics (names of people in the broadcast etc..).

But then I would need to be able to dynamically alter the text in my animation. Does Bodymovin allow this in any way?

[bodymovin]

Hi, there is no proper API to do this, but it's simple to solve.
If you need to change it before instantiating the animation, you can change the text in the JSON object.
If you need to change it in the middle of the animation, it's more complicated, but also doable by updating the JSON and creating keyframes.
Keep in mind that you need all characters you need exported from After Effects, so you should set the text in AE with all the character set.
If you need more help, let me know

[Adam-Burke]

Hi @bodymovin,

I'm a bit new to the bodymovin and after affects space to be honest. My technique for doing a similar thing to @henriklied described has been to build timelined animations by hand coding them and using the tween library GSAP to animate and modify svg data but the above technique seems far quicker and more performant potentially.

but also doable by updating the JSON and creating keyframes.

If you have the time would you be able to elaborate slightly on the following. Or point me towards some reading material that could illuminate this technique even if from a high level perspective. I guess I'm mainly interested in whether I can paramaterize a text field in after effects and get access to that paramater to dynamically change it in javascript somehow.

While I'm here may I also inquire into the state of 3d. It seems that most of the examples I see on codepen and others are 2d style animations. Is there any ability to create true 3d scenes and export them using bodymovin?

[bodymovin]

Hi, I made a demo on codepen than might help.
Check the description and the editor.
http://codepen.io/airnan/pen/ZLVJmq?editors=0010
3d is not very stable and I wouldn't recommend yet to try it. SVG doesn't go well with 3d animations yet and the html renderer has some issues.

[IceMan391]

Today I played a bit and was able to get dynamic text working within my database. Sweet!

I'm app-lovin' this.

[Darkhelmet0]

Only problem with this is if your trying to change animationData of an existing animation, you cant update the data. instead you create an entire new animation when you call anmi.loadAnimation(params with new data)

is there a way to "refresh the params" of an element without creating an entirely different object?

[bodymovin]

@Darkhelmet0 depending on the param you are trying to update.
Generally, any param with keyframes which are not "hold" keyframes, should be possible to update in the json data and they will be reflected in the animation.
For other static params, I don't have a solution yet.
For text, it might be tricky, but you could update the source of the layer.

[Darkhelmet0]

@bodymovin let me start by saying I love bodymovin, and have been working with it
diligently for the last 8 months. I was testing the values of a shapes fill
attributes at the time.

My current work around has been appending elements within the divs of
specific animation layers (rendered in html) then change those values
directly in the dom. But as I expand the scope of my project, I would love
to skip the hard coding of div elements based on the document tree, and
reduce my dom fetching.

By 'update source or the layer', do you mean in the animationData, or in
the dom?

I've read a few things from similar issues. please let me know if I am
misguided.

1. Not all features work in the HTML rendered (so its probably best to use
   svg, and my current workaround doesn't work with svg)
2. I need to add key frames on values that I want to change...( and then
   the animation data for that layer is dynamically fetched?)

Thank you for taking the time to respond and make this awesome tool!

On Thu, Jul 20, 2017 at 4:32 PM, hernan [e-mail] wrote:

@Darkhelmet0 https://github.com/darkhelmet0 depending on the param you
are trying to update.
Generally, any param with keyframes which are not "hold" keyframes, should
be possible to update in the json data and they will be reflected in the
animation.
For other static params, I don't have a solution yet.
For text, it might be tricky, but you could update the source of the layer.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/bodymovin/bodymovin/issues/238#issuecomment-316821495,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOotkA9EeWaKgoQsmkyh0QMRpWdnhdt-ks5sP7lfgaJpZM4L03Mu
.

[bodymovin]

by the source of the layer I mean the animationData.

1. yeah, specially some masking and strokes don't work well in the html renderer.
2. yes, exactly. What I usually do is add a keyframe in the first frame and a keyframe in the last one.
   Then I update both in the animationData so they interpolate from the same value constantly.

[ericmaicon]

Wondering if this is still working. I did a test where I try to change a text inside a layer and it doesn't reload the animation again..but if I manually change on the json and reload the browser ,it works.

Is it some kind of cache ? I didn't find much on the issues here.

You can try in the following jsfiddle:
https://jsfiddle.net/ericmaicon/8Lcsx73p/2/

If you click on the button, it tries to change. I even tried to destroy before.

[bodymovin]

@ericmaicon there are several ways to change the text of a layer, but in your example, you need to change this property instead of the nm:
json.layers[1].layers[0].t.d.k[0].s.t = 'oi.com'; on line 841