Lottie Color of animation?

[GummyGod]

I am trying to find the color for this animation, anyone has any ideeas where they sit? The JSON for it stands here, but it is huge. Any help would be greatly appreciated. Thanks.

[Inventsable]

Hi, are you the animator? The colors are an array within properties with the name c.k, like shapes.it[0].c.k, but you'd likely want to change this via CSS and in your AEP, not manually in your JSON result. In After Effects, do this:

   ‣ ■ 2 ★ Some Shape Layer
         ‣ Contents
               ‣ Group 1
                     ‣ Rectangle Path 1
                     ‣ Fill <<< Rename this to ".dot-fill"
                     ‣ Transform: Group 1

Then rerender and once on the site, this fill's value can be changed through CSS:

.dot-fill {
    fill: #ff0000;
}

The same can be done for strokes. AE stores colors in a floating point array, between 0 and 1, for RGBA. If you really need to use that array directly and can't do this in CSS, for whatever reason you need Javascript, then you could append a cl class to the it entry directly in JS before you use lottie.loadAnimation, or you can use a function like this to see the hexadecimal color of that c.k array:

/**
 * Converts an After Effects RGB color array to hexadecimal format
 *
 * @param {array} val          The array of floating values (eg. from shapes.it[0].c.k, like below):
 *                                      [ 0.525490224361, 0.262745112181, 0.262745112181, 1 ]
 *
 * @return {string}          a hexadecimal color value.
 */
function rgbaToHex(val) {
  while (val.length > 3) val.pop();
  return `#${val
    .map(c => {
      return (c * 255).toFixed(0);
    })
    .map(c => {
      c = c < 256 ? Math.abs(c).toString(16) : 0;
      return c.length < 2 ? `0${c}` : c;
    })
    .join("")}`;
}

[umarjavedpresize]

@Inventsable https://codesandbox.io/s/confident-poitras-dgt7r?file=/src/Loading.js I am trying to change the color of Lottie based on CSS, can you help mw with this?

[Inventsable]

@Inventsable https://codesandbox.io/s/confident-poitras-dgt7r?file=/src/Loading.js I am trying to change the color of Lottie based on CSS, can you help mw with this?

Your file doesn't have cl classes, which I recommend above. You can still manually query the <path> elements via CSS through selectors though, so if you want to change the color your CSS can be something to the effect of:

g g path {
  fill: red;
}

[Inventsable]

Note that the above isn't very specific. If you have many lottie files or many SVGs, the above code is likely going to affect more than just that loading indicator. You'd want to begin to create more specificity by, say, giving the loading indicator a specific class name, then define this as an ancestor:

.my-loading-animation g g path {
  fill: red;
}

This will isolate the CSS to only the loading animation instead of having lowest specificity via tag.