Pablouu commented 5 years ago

I want to change the color of this: https://lottiefiles.com/35-loader

Inventsable commented 5 years ago

Assign a class or ID to whatever fill is affecting your shapes:

   ‣ ■ 1 ★ Shape Layer 1
         ‣ Contents
               ‣ Ellipse Path 1
               ‣ Fill 1 <<< Rename this to a class, as in ".some-class"

Then reassign the color in CSS like so:

.some-class {
  fill: red;
  stroke: red;
}

Seeing as the creator of Lottie made the exact same recommendation as me below, you guys can stop giving me a thumbs down. This is a valid and recommended way. Had I posted something entirely inaccurate, feel free to give me thumbs down. You should not be handling styling in JS for lottie unless you absolutely have no other choice (and even then, why not traverse through, assign a cl key, then use CSS again?). Just because this didn't solve your problem in the way you wanted doesn't mean it won't solve it for someone else. Using only JS to handle this is the least effective and most difficult way possible, and solving this is a lot simpler than you might think or expect if you're new to using Lottie.

The newest and easiest way would be to import the JSON into AE using the Bodymovin panel, rename the shapes fill/stroke as seen above, then re-export and use CSS still. There's almost never a reason to handle this in JS instead of CSS.

weiesky commented 5 years ago

have found：(Fill 1)

{
  ty: "fl",
  c: {
    a: 0,
    k: [
      0,
      0,
      0,
    1
    ]
  },
  o: {
    a: 0,
    k: 100
  },
  nm: "Fill 1",
  mn: "ADBE Vector Graphic - Fill"
},

get

k: [
  0,
  0,
  0,
  1
]

which color do you prefer? Example: #34f293

k: [
  0.2039215686, // 34 is 3x16 + 4 = 52, value = 52 / 255 = 0.2039215686
  0.9480196078, // f2 is 15 x 16 + 2 = 242, value - 242 / 255 =  0.9480196078
  0.5764705882, // 93 ...
  1
]

Pablouu commented 5 years ago

I can't do it, i use a editor online but i don't understand the language, so i paste your code but nothing happens, i want to change the color to white

weiesky commented 5 years ago

https://assets4.lottiefiles.com/packages/lf20_6AbckL.json White is ready for you.

k: [
  1,
  1,
  1,
  1
] // this is white, #FFFFFF

vdias38 commented 4 years ago

Hi @weiesky I'm trying to change fill color using css class as you described above but it is not working. Can you help me please ? I've created a stackblitz, the json file is a public gist where I've renamed 2 fills '.square' (see screenshot below)

And apply following css as you suggested

.square {
  fill: green;
}

Do you see stg wrong ?

Thanks

bodymovin commented 4 years ago

hi @vdias38 instead of naming the layer can you try naming the fill properties with .square?

vdias38 commented 4 years ago

Hi @bodymovin I've named ".square" the fill of shape layer, not the layer, sorry if It was not well expressed on my comment, I fix it.

bodymovin commented 4 years ago

@vdias38 Can you share the .aep project or a simplified link where to look for the class?

vdias38 commented 4 years ago

Hi @bodymovin, sorry I haven't the aep, I'm manipulating directly the json, maybe it's why it not works... I've supposed renaming directly on json "Fill 1" should work do you confirm ? I've isolated the json node path I've updated: //"assets"/"id": "comp_9"/layers@"nm": "Shape Layer 1"/shapes@nm": "Rectangle 1"/it@nm": "Fill 1" It concerns a shape rectangle 640x300.

I've renamed "Rectangle 1" to ".rectangle1", and "Fill 1" to ".fill1" but none of these classes appears on svg. Below the result on svg of json node highlighted above. If I look for ".rectangle1" or ".fill1" on whole svg it returns none result. Then seems to have no effect to rename fill property on json, or couldn't be done like this directly on json ?

<g clip-path="url(#__lottie_element_196)" transform="matrix(0.0003433344536460936,0.9999999403953552,-0.9999999403953552,0.0003433344536460936,3658.390869140625,-373.87353515625)" opacity="1" style="display: block;">
    <g mask="url(#__lottie_element_223)" style="display: block;">
        <g transform="matrix(1.38100004196167,0,0,1.38100004196167,640,300)" opacity="1">
            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <path fill="rgb(254,197,3)" fill-opacity="1" d=" M415,-150 C415,-150 415,150 415,150 C415,150 -415,150 -415,150 C-415,150 -415,-150 -415,-150 C-415,-150 415,-150 415,-150z"></path>
            </g>
        </g>
    </g>
</g>

bodymovin commented 4 years ago

I see, those are the property names, but not the classNames, you will need to add an additional property "cl" to them with the class value for it to work.

vdias38 commented 4 years ago

@bodymovin that's the solution!! I've tested with cl and it works fine, thanks a lot for your support.

collinjoyce commented 4 years ago

In case anyone's still watching this or comes across it like I did, https://edit.lottiefiles.com/ saved my ass on an identical request.

MamaMightyMac commented 4 years ago

@bodymovin Hi! I have been trying to understand this thread because I have another designer that needs to use an animation I created on a whole group of client sites that all have different color schemes. The hope was that I could create one animation and let the stylesheets for each site dictate color, stroke widths...I was following along until you got the adding "cl" and then magic happens and everyone's ok but I'm lost how to do that. I am NOT a developer. (I'm rusty on my html/css ) Please explain in painful, newbee style detail how I can do this. I'm also trying to champion Lottie for all our applications and products so finding ways to customize without creating assets every single time would be great. (like if bodymovin' could capture the master properties so that I could alternately create multiple color versions in the precomps instead of just capturing the master file's attributes.) Thank you. :-)

Inventsable commented 4 years ago

Assign a class or ID to whatever fill is affecting your shapes:

‣ ■ 1 ★ Shape Layer 1 ‣ Contents ‣ Ellipse Path 1 ‣ Fill 1 <<< Rename this to a class, as in ".some-class"

Then reassign the color in CSS like so:
.some-class {
  fill: red;
  stroke: red;
}

@MamaMightyMac, if you have control of the AEP file then it honestly is this simple, and you can just reassign the particular class attributes via a stylesheet. People are wanting to do it programmatically in JS in this thread, but that's not a very effective solution in my opinion and completely unnecessary now that Lottie has two-way compatibility and you can import into AE.

MamaMightyMac commented 4 years ago

Hi,

Thank you so much for responding!!!!!!!!

I cannot figure out HOW to change the Fill 1 property name to a Class name except by searching effects. Here is a screenshot. I’ve Gone to the link you provided too. I can easily change the layer name but not the Fill or Stroke. (And I cannot find any way at all for stroke.) I’ve been on this for days….

On Jun 15, 2020, at 7:59 PM, Tom Scharstein notifications@github.com wrote:

Assign a class or ID https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript to whatever fill is affecting your shapes:

‣ ■ 1 ★ Shape Layer 1 ‣ Contents ‣ Ellipse Path 1 ‣ Fill 1 <<< Rename this to a class, as in ".some-class"

Then reassign the color in CSS like so:

.some-class { fill: red; stroke: red; } @MamaMightyMac https://github.com/MamaMightyMac, if you have control of the AEP file then it honestly is this simple, and you can just reassign the particular class attributes via a stylesheet. People are wanting to do it programmatically in JS in this thread, but that's not a very effective solution in my opinion and completely unnecessary now that Lottie has two-way compatibility and you can import into AE.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/1666#issuecomment-644451121, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEIAQIZQEHZYXDUWF62QMDRW2YU5ANCNFSM4HV7RJ3A.

Inventsable commented 4 years ago

Hi, I don't see a screenshot. Are you working with a locked file or did you make this yourself? You just change the layer or property name, as in Fill (the property group, not property itself. The one with the twirldown). If you want to make it a class and it's currently Fill 1, you can rename it to .some-class. Lottie recognizes any property name or layer prefixed with . as a class you can use with CSS, and # as an id. You rename it the same way as any thing else in After Effects, double click or select and hit Enter. Nothing to do with Effects panel:

ice_screenshot_20200615-174756

MamaMightyMac commented 4 years ago

That’s the thing…. I cannot for the life of me, change the name from Fill 1 to anything else, same with Stroke. I created the file myself. I’ve attached the AE. This seems so easy but by golly - nothing. Could it be a Mac vs Windows thing?

On Jun 15, 2020, at 8:49 PM, Tom Scharstein notifications@github.com wrote:

Hi, I don't see a screenshot. Are you working with a locked file or did you make this yourself? You just change the layer or property name, as in Fill (the property group, not property itself. The one with the twirldown). If you want to make it a class and it's currently Fill 1, you can rename it to .some-class. Lottie recognizes any property name or layer prefixed with . as a class you can use with CSS, and # as an id. You rename it the same way as any thing else in After Effects, double click or select and hit Enter. Nothing to do with Effects panel:

https://user-images.githubusercontent.com/37279677/84719533-738af900-af30-11ea-9b60-710247b8b2da.png — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/1666#issuecomment-644464977, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEIAQOW7MNXGI3K7TZ7AFTRW26PZANCNFSM4HV7RJ3A.

Inventsable commented 4 years ago

Curious, are you just learning AE, or is this a recent change due to an update? Do you see error or bug reports about it?

MamaMightyMac commented 4 years ago

Yes, I started learning AE about a year ago, specifically for Lottie. My company wants to add animations to their products but can’t settle on anything since we always have to have parity btwn iOS, Android & web. So I apologize if I don’t know all the cool shortcuts. But gosh it shouldn’t be this hard when I can change the layer names with ease.

I created two animations - one for when a product is activating - so the amount of time it could take varies (Clock) and when it is complete - Check. So then I started trying to figure out how to change things on the fly but not using the LottieFiles web-based tool that creates new assets. Ideally - one asset controlled by stylesheets. Perfect.

I”ve been trying to edit the demo.html file in dreamweaver as well , to add the class name in the style and change the color of say, the background of the check, but nothing works.

On Jun 15, 2020, at 8:58 PM, Tom Scharstein notifications@github.com wrote:

Curious, are you just learning AE, or is this a recent change due to an update? Do you see error or bug reports about it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/1666#issuecomment-644467459, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEIAQOS46NQHMPI3JPC7D3RW27TNANCNFSM4HV7RJ3A.

Inventsable commented 4 years ago

Ideally - one asset controlled by stylesheets. Perfect.

This is how the original Bodymovin panel, not the LottieFiles one, works if you rename and assign classes/ids then use CSS to alter the values. Just to be clear though, the following does not work:

Create a new shape layer
Twirl the layer open, click Add > on the Contents line.
Choose fill
Twirl open to see Fill 1 group, select it and only it (may need to click empty space in Comp viewer to deselect everything else).
Press Enter

You can also Edit > Keyboard Shortcuts and search for Rename, which has the same effect

MamaMightyMac commented 4 years ago

Press Enter Oh. My. Goodness.

Amazing. Appreciating the simplest of things in life right now. (And feeling stupid)

So renaming only works for Bodymovin’ output, not LottieFiles. I can live with that. I will try again.

I can see it now in the json file. :-) Now I just have to figure out how to make it appear in an html page.

On Jun 15, 2020, at 9:11 PM, Tom Scharstein notifications@github.com wrote:

Ideally - one asset controlled by stylesheets. Perfect.

This is how the original Bodymovin panel, not the LottieFiles one, works if you rename and assign classes/ids then use CSS to alter the values. Just to be clear though, the following does not work:

Create a new shape layer Twirl the layer open, click Add > on the Contents line. Choose fill Twirl open to see Fill 1 group, select it and only it (may need to click empty space in Comp viewer to deselect everything else). Press Enter You can else Edit > Keyboard Shortcuts and search for Rename, which has the same effect

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/1666#issuecomment-644471105, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEIAQJCKKD6VIOURNQCYOTRW3BDLANCNFSM4HV7RJ3A.

Inventsable commented 4 years ago

We've all been there. Also just to clarify, I don't know that LottieFiles works the exact same way with their format so I can only guarantee this method will work with Bodymovin' but am unsure about how LottieFiles handles it. Don't actually know that it isn't supported with LottieFiles in case that route would be easier for you.

MamaMightyMac commented 4 years ago

Thank you again SO MUCH. TWO DAYS to find out I just press “enter.” Oh man, that is one for the books.

Virtual hug.

Now I can go make dinner.

On Jun 15, 2020, at 9:11 PM, Tom Scharstein notifications@github.com wrote:

Ideally - one asset controlled by stylesheets. Perfect.

This is how the original Bodymovin panel, not the LottieFiles one, works if you rename and assign classes/ids then use CSS to alter the values. Just to be clear though, the following does not work:

Create a new shape layer Twirl the layer open, click Add > on the Contents line. Choose fill Twirl open to see Fill 1 group, select it and only it (may need to click empty space in Comp viewer to deselect everything else). Press Enter You can else Edit > Keyboard Shortcuts and search for Rename, which has the same effect

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/1666#issuecomment-644471105, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEIAQJCKKD6VIOURNQCYOTRW3BDLANCNFSM4HV7RJ3A.

xxmuaddib commented 4 years ago

You can also use my library to change colors of a lottie animation from code - https://github.com/xxmuaddib/lottie-colorify

techwil commented 3 years ago

@xxmuaddib it's not working at my end i tried it so..

xxmuaddib commented 3 years ago

@techwil Can you post an example so I could help you? As it is another project, I would suggest posting the example there.

techwil commented 3 years ago

The example isn't working.

xxmuaddib commented 3 years ago

You can pull it again, it will work now. lib folder wasn't included in the repo. You could build it using yarn build. But now I have added it to the repo. However, IMHO it is inappropriate answering questions about other package here. So if you will need further assistance, ask questions in lottie-colorify repo.

techwil commented 3 years ago

@bodymovin is there any way to manipulate the Lottie json file with a new color?

spoeken commented 3 years ago

How about setting the color to currentColor, how would that be done?

techwil commented 3 years ago

@spoeken I'm working on something big would You like to be a part of it?

smostafad commented 2 years ago

Hi guys, I want to have an icon editor similar to www.lordicon.com, but when I edit the json file on the site by inspect, the color changes, but whatever I do with the coding, it does not change anything Can you help me ?.

Inventsable commented 2 years ago

Hi guys, I want to have an icon editor similar to www.lordicon.com, but when I edit the json file on the site by inspect, the color changes, but whatever I do with the coding, it does not change anything Can you help me ?.

You'd have to edit the JSON before loading your animation into lottie. Are you? No changes to the JSON after loading it would have any effect on the animation. I'd still recommend doing it by CSS even when programmatically -- traverse through all shapes and when a cl key/value isn't found, create one for that shape, then load the animation and use CSS to control the color so it can be modified at any time after load and during playback.

smostafad commented 2 years ago

In After Effects, I gave it an id and change it with css code, but as a color picker, every Ready codes that I put does not change anything. Do you have a code that can help me?

Inventsable commented 2 years ago

Sorry, I don't understand what you mean by that. What does "as a color picker, every Ready codes that I put does not change anything" mean?

Inventsable commented 2 years ago

If you're wanting to have part of a lottie animation that changes according to color picker input, I'd assign a cl (or do it in AEP as suggested initially) to the shape's fill/stroke you want to target. Use a CSS variable inside that fill/stroke for the color, and reassign the value of the variable to the color picker's result each time it's invoked.

smostafad commented 2 years ago

I mean, I put the id in After Effects on a JavaScript id to change the color, but it does not change at all.

Inventsable commented 2 years ago

Can you provide an example? Screenshot of AEP, JSON, and/or CSS being used?

smostafad commented 2 years ago

For example, after a effect, I consider a name layer to give as an id in JavaScript so that the color changes when the color pick is opened.

Inventsable commented 2 years ago

Your phrasing of things is very hard to understand. Can you give screenshots or code instead?

Inventsable commented 2 years ago

Ideally:

Screenshot of the ID inside After Effects
Link to lottie JSON
CSS selector or JS snippet where you use the id but it isn't working

smostafad commented 2 years ago

Screenshot (76) Screenshot (75) The id I gave in After Effects works on the site, but when I call in JavaScript, its color does not change at all.

Inventsable commented 2 years ago

All correct so far. How are you calling and changing the color in JS?

smostafad commented 2 years ago

Screenshot (77)

Inventsable commented 2 years ago

color is an SVG element, not an HTML one:

#color {
    fill: black;
}

You need to use the fill attribute of CSS instead of treating it like an HTML element and trying background/background-color.

smostafad commented 2 years ago

color{

stroke : red !important }

It changes with this, but I want it to be a color pick

Inventsable commented 2 years ago

I'd personally use CSS variables instead, altogether:

:root {
  --someColor: #ff0000;
}

#color {
    fill: var(--someColor);
}

Then in JS:

function setCSS(key, value) {
  document.documentElement.style.setProperty('--' + key, value);
}

// Whenever we need to change it:
setCSS("someColor", "#009900") // can use any valid CSS color value (hex, HSL, RGB, RGBA, named color, etc)

Inventsable commented 2 years ago

See above comment about CSS variables 👍

Inventsable commented 2 years ago

Your color picker also needs to not target style.backgroundColor on value change. This is one of the many reasons why CSS is far easier and more efficient to use for styling than JS as I've maintained throughout the thread, ha. You'd need to target fill or ideally use CSS variables on the color picker callback.

smostafad commented 2 years ago

I do not know much JavaScript that I put the code correctly?

airbnb / lottie-web

Change color of a animation file #1666

color is an SVG element, not an HTML one:

color{