Lottie-web: Change colors of json

[samiam2017]

Hi I looked at your promo vid and it appears to show that we can easily change jsons colors with CSS code. How can we do that? I have an animation that has 3 objects animating 1 with a grey stroke, 1 with a white stroke and 1 with a green fill. Is it possible to adjust just the green fill object of the animation with css?

[JHaland]

Hi! In After Effects you can add a class (.) or tag (#) to the Fill or Stroke you want color control. In your shape Fill (often called Fill 1), change the name to #colorchange or something shorter like #fill. And then you've created a tag that can be controlled with CSS. Hope that helps :)

[samiam2017]

Thanks JHaland! This is super helpful!!!

[RanSlidely]

How I can add a class or tag in After Effects?

[JHaland]

@RanSlidely As I wrote in my response, you add this in After Effects by changing names inside the program. Fill color is called Fill and you can change the name to #fill and use it in css and refer to #fill. That said I've not been able to make this work for everything else in AE. Tried to control opacity without getting it to work, maybe I'm doing something wrong.

[RanSlidely]

If I need to control on text color and line in the same animation How can I do that?
Let say I have to text box that need to have different fill or stroke and I have a 2 line shape that have stroke.

Ran

[JHaland]

@RanSlidely you need to add different class to the fill and the stroke. #fill and #stroke. If you have more then one #fill1 #fill2, #storke1 #stroke2 for instance. If you want to control many different words in a text row, I think you have to split the text up in different text boxes.

[RanSlidely]

Thanks for the quick answer, I'm not found where to change the fields in the AF program, and can't find a guide over the web.
can you guid me how to change it?
Thanks

[JHaland]

Ah, I've not tested this on text, and I see that this could be a problem. Turn your text into shapes or use the effect Fill. You can't give new name to text fill and stroke fields. If you can change it's name, you can add a class or id.

[RanSlidely]

I need it as a live text I'm changing the the json file before I load the animation.
can we go on private chat or email?
I want to share a demo with you and offer a solution.

[JHaland]

Sorry I don't have time for that now. I guess I would do that part in normal css and just use a reference in the json like a null. I haven't done this at all, so I'm only guessing. you can contact me over at www.jhaland.com

[RanSlidely]

I can suggest that you can use the AF layer name and add is a html id to the dom element my be that can help.

Thank you!

[Grolobor]

Hi guys,
I've named After Effects shape layers but I can't change the fill color in the css file after. I changed the name shape layer to "#ball" - nothing, then I changed it in contents and the last option was Fill 1 property, same result. Could you send me one simple example in AE with a shape layer or a screenshot for this? Sorry guys I don't see the way. Thank you

[bodymovin]

@Grolobor changing the Fill 1 property should work fine.
How are you using that selector with css?

[Grolobor]

@bodymovin I can't believe it and I don't know why but it's working now. Murphy's Law guys, I restarted the computer and I did it again, perfect. Changing de Fill 1 property and naming again with "#". I've used querySelector to modify the fill and strokes.
Thank you.

[robbypurefusion]

@RanSlidely I'd like to chat you with you. I'm doing similar stuff. Please reach out to me. [email protected]

[robbypurefusion]

@RanSlidely Trying you again on here. Please reach out to me. [email protected]

[bitcloudTheFirst]

Hi all, was there any update to this? I can't seem to get this to work on text layers