Change color dynamically in lottie json

Question

I did Lottie animation by using Lottie-web and now trying to change the color dynamically so I used Lottie API(https://github.com/bodymovin/lottie-api). In that, I got the keyPath for changing the color but don't know how to change the color of an object.

This is the code for creating the lottie object animation

var animData = {
      container: animationContainer,
      renderer: "canvas",
      loop: true,
      autoplay: true,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid meet"
      },
      path: "https://labs.nearpod.com/bodymovin/demo/chameleon/chameleon2.json"
    };
    anim = lottie.loadAnimation(animData);

for changing the color of a Lottie JSON I used

animationAPI.getKeyPath(
        "#leaf_3,Contents,color_group,fill_prop,Color"
      );

I got the path of an object but now I don't know how to change the color so Kindly help me if anyone knows?

Answer 1

You can use lottie-colorify package to change animation colors:

const animation = Lottie.loadAnimation({
  container: container.current,
  animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});

Answer 2

The easiest way to make the color dynamic for a shape in Lottie is to rename your "Stroke 1" or "Fill 1" in After Effects to "#somename". After exporting, you can reference that shape in your CSS like this:

#somename {
  stroke: red;
  /*or*/
  fill: red;
}