Not working with Lottie-Web v5.1.13

[bodymovin]

Not working with Lottie-Web v5.1.13

[bodymovin]

Hi, can you share the json file?

[taylorjames]

Here is a link to the .json file
https://github.com/taylorjames/lottie-test/blob/master/animation-test-01.json

I am able to play the animation fine with lottie-web

[taylorjames]

Thanks for your reply!

[bodymovin]

getLayersByName is not part of the API yet.
Still working on it and it might not be implemented in the end.
Not sure exactly what you want to do, but you probably want to do:
var layers = animationAPI.getKeyPath('text-layer'); layers.getPropertyAtIndex(0).setDocumentData({t:'test'})

[taylorjames]

Thanks, I am building a web video editor in which you can add animated text layers to a video. Is there a way to easily scale/transform a layer or group of layers from the api?

[taylorjames]

Also, do you know if there is a way to use svg files instead of .json data with lottie?

[bodymovin]

Not really, the main difficulty is to animate them without javascript.
Regarding the scale layer, you can traverse the property model to the scale and pass a value to it.
I can give you an example later if you need.

[taylorjames]

As I am getting deeper into this project I have more questions. Would you be kind enough to jump on a google hangout sometime?

[taylorjames]

I found that the solution to a lot of my questions is to create expressions in AE that are then exported with your plugin. I have a few questions about the fonts. I do not want to export the characters to svg because the text in the animation is just a placeholder for user specified text. My issue is that when I do not convert the characters, my expression that gets the size of the text does not work.

Basically, I am trying to use an expression to make a background rect the same size as the text rect and add a little padding.

Here you can see my ae file and the exported json.
https://github.com/taylorjames/lottie-test

Can you tell me why the background box does not resize when played with the lottie web svg player?

[taylorjames]

@bodymovin can you please advise? I can pay you for your time

[bodymovin]

Hi, sorry I've been busy and I missed this email.
Do you have a link with the implementation?
I've just tried it and it seems to work fine

[taylorjames]

weird, ok let me see if I can make something public for you to try

[taylorjames]

In after effects the yellow box behind the text is as wide as the text plus a little padding. When lottie plays it, it looks as though it is only the padding dimensions. The animation works however the yellow box is not sized correctly according to the text. Are you seeing the same result as in after effects?

Thanks bodymovin!

[bodymovin]

Yes, I'm seeing the yellow box resize together with the text dimensions.

[taylorjames]

Interesting, what implementation are you using to play the animation?

[bodymovin]

nothing out of the ordinary

[taylorjames]

I found the issue.

This works.

var animData = {
          container: state.element,
          renderer: 'svg',
          loop: false,
          autoplay: false,
          path: '/static/assets/test/animation-test-01.json',
          rendererSettings: {
            className:'svg-layer-'+idx
          }
        };

this doesnt work

var animData = {
          container: state.element,
          renderer: 'svg',
          loop: false,
          autoplay: false,
          animationData: layer.svg.json,
          rendererSettings: {
            className:'svg-layer-'+idx
          }
        };

The json in the second one is imported via webpack and passed as a key/value to the layer

[bodymovin]

I just tried it with animationData too, and it works on my side too.
Is it possible that the element is not added to the DOM when started?
getSourceRectAtTime relies on getBBox and it probably doesn't measure correctly the element if it's not yet drawn.

[taylorjames]

Maybe It could have something to do with how webpack is loading the json?

[taylorjames]

I am using react server side so that could be

[bodymovin]

I need to work on removing that dependency to measure text layers, but unfortunately it's not ready yet.

[taylorjames]

Ok, I got it working.

The issue was the I was hiding all the layers with display: "none" soon as they were created.

[taylorjames]

Thanks for your help @bodymovin

[bodymovin]

nice! glad it works

[taylorjames]

@bodymovin would it be possible to create an after effects file from the exported json file?

[bodymovin]

It should be possible to a certain extent, but I haven't worked on it yet.