How to change position of layers?

[AustinHatem]

Hello, Ive been trying to change the position of a layer in a lottie animation. I can't seem to get it to work and was wondering if anyone had an example of this working? Thanks so much.

[Inventsable]

Hi, it would be something like this, assuming you've already loaded both lottie-web and lottie-api:

// Create the lottie instance for lottie_api to use
const animationData = lottie.loadAnimation({
  wrapper: elt, // The HTML node
  animType: "svg",
  autoplay: true,
  animationData: lottieFile, // the JSON of the lottie file
});

const layerName = "Shape Layer 1";
let newXPosition = 100,
  newYPosition = 100;

const API = lottie_api.createAnimationApi(animationData); // Create the lottie_api instance

// Add a value callback of the keypath to Position for this layer:
API.addValueCallback( 
  API.getKeyPath(`${layerName},Transform,Position`),
  (currentVal) => {
    return [newXPosition, newYPosition]; // Sets the initial value, can use currentVal[0] and [1] for no change
  }
);

// Now any change to the above variables will affect the Lottie animation, like so:
newXPosition = 200;
newYPosition = 200;

[AustinHatem]

Wow thank you so much that makes so much sense. Now if I wanted to transform the colors would I have to also reference them by layer name or is there a way to change all instances of a certain color in a lottie? Thanks again so much.

[Inventsable]

Personally I think the AE floating point RGB colors are hard to work with and when I need to change all instances of anything related to CSS, I iterate through the JSON and make changes to it before feeding it to lottie. You can add a cl property to the layer/shape and control anything through CSS instead of using lottie api. So for instance, getting the hex of a particular shape color within a lottie JSON:

const someColor = rgbToHex(
  shape.c.k.map(col => {
    return (col * 255).toFixed(0);
  })
);

function rgbToHex(val) {
  while (val.length > 3) val.pop();
  return (
    "#" +
    val
      .map(c => {
        c = c < 256 ? Math.abs(c).toString(16) : 0;
        return c.length < 2 ? "0" + c : c;
      })
      .join("")
  );
}

This makes things much more manageable:

[1,0.294117647059,0.294117647059,1] => #ff4b4b
[0.214701992858,0.793463972503,0.214701992858,1] => #37ca37
[0.024663150311,0.031613096595,0.03247018531,1] => #060808
[0.29411765933,0.309803932905,1,1] => #4b4fff
[0.024663150311,0.031613096595,0.03247018531,1] => #060808
[0.824836492538,0.824836492538,0.824836492538,1] => #d2d2d2
[1,0,0,1] => #ff0000

I'd recurse through the JSON to find any instances of a color within a shape, assign cl to the parent, and assign some arbitrary HTML class to the hex value so all instances of the same color share the same class if you don't know exactly what to look for. This would be a ton easier if you assigned them classes on the AE side and I made a panel for doing this a few years back but I don't know if you have control of the source animations or not.

If you'd absolutely need to use lottie api to do so, it should be relatively similar to the original response except that you'd need to provide a 4 point array. I'm pretty sure I've had to do this before and could dig up an example if you have trouble.

[AustinHatem]

Thanks so much for taking the time to answer. I'm going to give this a shot.