bodymovin/lottie-api

A library to edit lottie-web animations dynamically

lottie-api's Issues

Can I get keyframes via lottie-api?

I found that the keyframe definition of the shape is very complicated. Is it an upgrade schema or an api?

Typescript Definitions

Now that lottie-web has official typescript definitions, maybe we can get them created for lottie-api as well?

How to use other methods, is there a manual?

Such as these methods:
getKeyPath,
addValueCallback,
recalculateSize,
toContainerPoint,
fromContainerPoint...

I see these methods, but I can't figure out how to call them. Are there any examples to help me figure out how to use them?

Bodymovin 5.4.4+After effects v16 not convert text to shape

Multiple dependency vulnerabilities in npm module

Hello Hernan,

The lottie-api npm package @1.0.0 reports 6 vulnerabilities on install:

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 145 packages from 122 contributors and audited 19537 packages in 14.033s
found 6 vulnerabilities (1 low, 1 moderate, 4 high)

With npm audit:

  High            Regular Expression Denial of Service                          
                                                                                
  Package         minimatch                                                     
                                                                                
  Patched in      >=3.0.2                                                       
                                                                                
  Dependency of   lottie-api                                                    
                                                                                
  Path            lottie-api > gulp > vinyl-fs > glob-stream > glob >           
                  minimatch                                                     
                                                                                
  More info       https://nodesecurity.io/advisories/118                        
                                                                                
                                                                                
  High            Regular Expression Denial of Service                          
                                                                                
  Package         minimatch                                                     
                                                                                
  Patched in      >=3.0.2                                                       
                                                                                
  Dependency of   lottie-api                                                    
                                                                                
  Path            lottie-api > gulp > vinyl-fs > glob-stream > minimatch        
                                                                                
  More info       https://nodesecurity.io/advisories/118                        
                                                                                
                                                                                
  High            Regular Expression Denial of Service                          
                                                                                
  Package         minimatch                                                     
                                                                                
  Patched in      >=3.0.2                                                       
                                                                                
  Dependency of   lottie-api                                                    
                                                                                
  Path            lottie-api > gulp > vinyl-fs > glob-watcher > gaze > globule  
                  > glob > minimatch                                            
                                                                                
  More info       https://nodesecurity.io/advisories/118                        
                                                                                
                                                                                
  High            Regular Expression Denial of Service                          
                                                                                
  Package         minimatch                                                     
                                                                                
  Patched in      >=3.0.2                                                       
                                                                                
  Dependency of   lottie-api                                                    
                                                                                
  Path            lottie-api > gulp > vinyl-fs > glob-watcher > gaze > globule  
                  > minimatch                                                   
                                                                                
  More info       https://nodesecurity.io/advisories/118                        
                                                                                
                                                                                
  Moderate        Prototype Pollution                                           
                                                                                
  Package         lodash                                                        
                                                                                
  Patched in      >=4.17.11                                                     
                                                                                
  Dependency of   lottie-api                                                    
                                                                                
  Path            lottie-api > gulp > vinyl-fs > glob-watcher > gaze > globule  
                  > lodash                                                      
                                                                                
  More info       https://nodesecurity.io/advisories/782                        
                                                                                
                                                                                
  Low             Prototype Pollution                                           
                                                                                
  Package         lodash                                                        
                                                                                
  Patched in      >=4.17.5                                                      
                                                                                
  Dependency of   lottie-api                                                    
                                                                                
  Path            lottie-api > gulp > vinyl-fs > glob-watcher > gaze > globule  
                  > lodash                                                      
                                                                                
  More info       https://nodesecurity.io/advisories/577                        
                                                                                
found 6 vulnerabilities (1 low, 1 moderate, 4 high) in 19537 scanned packages

I'd love to use the node module instead of adding the file client side but was discouraged from using it the last few weeks due to these and not knowing if manual review would introduce breaking changes. Will attempt to manually fix the dependencies and report here

How to change position of layers?

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.

Fails to find Keypath

Hi @bodymovin ,
we are trying to add a valueCallback to our animation to change color of a gradient fill.

This is our animation :
animation

What we tried:

var property = animationAPI.getKeyPath("COCKTAIL_STANDARD,Group 1,Gradient Fill 1")
animationAPI.addValueCallback(property, function(currentValue) {
        console.log("Current Value -", currentValue)
        return [0.1, 0.2, 0.3, 1]
    })

We noticed that the callback is never called, investigating the functiong getKeypath it seems that it can't find the childs of the first Keypath.

Can you please help us?
Thanks

When the image is included in the animation, calling the API will report an error.

When the image is included in the animation, calling the API will report an error.

src\layer\LayerBase.js:8 Uncaught TypeError: Cannot read property 'finalTransform' of undefined at LayerBase (src\layer\LayerBase.js:8) at Image (src\layer\image\ImageElement.js:9) at getLayerApi (src\helpers\layerAPIBuilder.js:19) at src\animation\AnimationItem.js:8 at Array.map (<anonymous>) at AnimationItemFactory (src\animation\AnimationItem.js:8) at Object.createAnimationApi (src\index.js:4) at tupian (demo.html:57) at HTMLButtonElement.onclick (demo.html:36)

In the API image function, LayerBase(element) is used, but there is a function call state.element.finalTransform in LayerBase, but the dictionary data passed in here will not find finalTransform.

Fix suggestion：
from
`function Image(element) {

var methods = {};

return Object.assign({}, LayerBase(element), methods);

}tofunction Image(element, parent) {

var methods = {};
var state = {
    element: element,
    parent: parent,
    properties: []
};

return Object.assign({}, LayerBase(state), methods);

}`

How can I dynamically update the value of a text?

How can I dynamically update the value of a text?

Smooth transition within a value callback

Hello,

I'd like to use a Lottie animation for a progress bar, ideally in such a way that I can connect all elements to a single slider control, then change the value callback of this slider with JS from 0 - 100. This isn't hard to do at all, but one issue I notice is that I don't know how to gradually change the value -- I only know how to change it from numbers like 0 to 20 in two frames, instead of simulating something like a cubic-bezier timing so that it ramps from one number to the next.

Is there any easy way to achieve this?

Dfh

Ty

Not working with Lottie-Web v5.1.13

I am trying to use this library to modify some lottie animations but have run into some problems where the api cannot find the data on the layers.

When I call animationAPI.getLayersByName('text-layer') I get Cannot read property 'nm' of undefined. It seems as if maybe Lottie-web changed its animation model or maybe Im not loading things properly?

Upon further inspection of LayerList.js:18, none of the elements in the loop have a data property which is causing it to throw an error.

Here is my code

import SVG from 'svg.js';
import Lottie from 'lottie-web';
import LottieAPI from 'lottie-api';

export default class SVGEngine {
  constructor() {
    // this.height = height;
    // this.width = width;
  }

  start(id) {
    if (!SVG.supported) {
      // SVG NOT SUPPORTED
      console.log('svg not supported');
      return;
    }


    const element = document.getElementById(id);
    var animationAPI;
    var animData = {
      container: element, // the dom element that will contain the animation
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: '../static/assets/test/animation-test-01.json' // the path to the animation json
    };
    const anim = Lottie.loadAnimation(animData);

    anim.addEventListener("DOMLoaded", function(){
      animationAPI = LottieAPI.createAnimationApi(anim);

      console.log('anim api', animationAPI.getLayersByName('text-layer'));
    });



    console.log('anim',anim);
    
  }
}```

Opacity not working

I'm trying to target Opacity and it won't work. Neither does with Shape Layers and Null Objects.

Can you try targeting the Opacity and confirm it is not working?

t

fixed**

Animation not following instruction in local svelte build

Hej,

I am trying to integrate lottie-web and lottie-api in a Svelte application.
I took the following codepen example:
https://codepen.io/driezis/pen/zYOQLrw

and made a svelte version from it:
https://codesandbox.io/s/followingfacesvelte-3grho

It works nicely in the codesandbox, but when I download the zip with all the files from the codesandbox and try to have it build locally, the face is not following the mouse.

It may has something to do with this issue: airbnb/lottie-web#2599

I am out of my depth by now, any suggestions on how to solve this?

Best,
Rasmus

Lotti-API Documentation

Lotti-API Documentation

There really is a huge need for a detailed documentation on how to use this API - I've started on something with the help of Mr. GPT but I hope @bodymovin can have some input!

here's what I have so far
Lottie_API_Documentation.md

addValueCallback to a 'slider value' on a NullObject.

Hi there,

Just discovered the web-API and it works fine on all the transformation properties of a layer.
But i can't seem to get it to work with Slider Effects on a NullObject.
What im trying to achieve is a dynamic animation, where a slider value controls the length of a bar-graph and text representing the value.
All the animations are done (and linked to the slider) in AE, and all i need to change is the value of the slider to control the animation. But is can't seem to get it to work on any other property outside transform.

I found documentation about dynamic properties on Android: https://airbnb.io/lottie/android/dynamic.html
And assuming its the same for web, it doesn't say other variables are supported. (in my case the null object containing a slider control)

Are there any plans on upgrading the API so more properties are supported?
Or am i missing something and can i achieve my goal in any other way with the API that i don't know of.

I've been trying the old way of directly changing the value without the API, but i can't seem to get that working anymore :(
anim.animationData.layers[0].ef[0].ef[0].v.k[0].s[0]

Are there any great minds out there who can push me in the right direction?
Thanks in advance!

addValueCallback() doesn't work unless animData.loop = true

I've always wanted to create dynamic backgrounds, like this:

But wanted to harness Lottie API to have the eyes actually follow the user's cursor, which works very smoothly for only one instance but has a noticeable lag/performance hit with multiple:

I understand what I'm doing here is very taxing, but can it be confirmed whether addValueCallback() only works when animData.loop is true? This seems like odd/undesirable behavior in the instance I'd want to have an initial state (like the eye opening) then dynamically pass a new value in later, because atm it only works when the eyes are constantly flashing open and closed (since it's looping the entirety of the animation) unless I use a completely separate file which doesn't have those keyframes.

Get Animation Data after the API has changed something.

Is there a way to get the new updated animation data (the lottie JSON) after the API has changed something? Thanks.

[bug]Can't directly modify colors in animation

function setValue(value) { var property = state.property; if (!property || !property.addEffect) { return; } if (typeof value === 'function') { return property.addEffect(value); } else if (property.propType === 'multidimensional' && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && **value.length === 2**) { return property.addEffect(function () { return value; }); } else if (property.propType === 'unidimensional' && typeof value === 'number') { return property.addEffect(function () { return value; }); } }

When i do not appily the AddValueCallback method to modify the color data and modify the color data directly through setvalue(),I cannot modify it successfully. Because the format of color data is [r, g, b, a]. The length of this array is 4, so in this case the conditions in if cannot be met, so the color data cannot be modified.

Accessing layers

Is there any way to simply access a layer/path of a Lottie animation in JS like you would in CSS?

How to use lottie-api with Angular

I am using ngx-lottie and I want to use lottie-api with it. How to use it?

Animate values

The api is and works great for editing values of an animation, so thank you for this!

But is it possible to animate a value change? For example, changing the Transform - Position property at random so the object goes from A to B in a smooth motion, instead of jumping to it's new position.

I can get the position to change, but the object isn't moving towards the new object. I guess because it doesn't know it's new position? Is this possible with the api or should I be looking at different solution, if possible at all?

Thank you in advance!

EDIT:
And adding to this, is it possible to use the lottie-api in combination with playSegments (looping and not looping). Since I got it to work, but it stops after playing the segment. I used the example where an object follows the mouse.

Publish it in NPM

Could you publish it in NPM so we can import it in our projects?

How to retrieve the value of a property?

I'm having no trouble using getKeyPath() and addValueCallback() but I cannot figure out how to simply retrieve the value of a property, eg as an array. How can I determine the Position property of a layer as an array of [x,y,z] values? Better still, where is the documentation that explains how to do this! I've been googling for over an hour for something that seemingly ought to be so simple.

Documentation lacking and/or unclear

Hello @bodymovin,

I'm finding it pretty hard to understand the methods (specifically parameters within them) of this repo beyond the example located in /examples and the codepen you've linked to of the Duik walk cycle. Can a more detailed write up of the readme or a few more examples be added to a queue on your workload?

In this instance:

var neckAndHead_softness_key_path = animAPI.getKeyPath(
    "C | Walk Cycle,Effects,Walk Cycle,35"
  );
  animAPI.addValueCallback(neckAndHead_softness_key_path, function(current) {
    return controls.neckAndHead_softness;
  });

Since I don't have access to your AEP, I don't really know if C | Walk Cycle is the name of a layer, or C (pipe) is a special syntax referring to a layer named Walk Cycle, etc. I don't know how to access a layer within a precomp (how do I use getKeyPath for a layer not at first depth?) and I don't know how to make a single change to a single property then destroy/disable it's reference/valueCallback. From what I see in the docs, I'd be adding a new valueCallback each time I want to change this -- in my use case, valueCallbacks can't be hardcoded like the above.

I'd love to use this library extensively and begin to help out with documentation and pull requests, but it's been a struggle to understand without a bit more initial information.

Thanks for all the great work

Getting the dimensions of the layer or text box

Hi ,
Can you help me with getting the dimensions of the layer inside composition? I don't have any ideas.
Thanks in advance.

Declaration types

Please update declaration types in package release. At the moment is not possible to easly use this lib with TypeScript.

KeyPathList function has logic bugs on iteration

The animation project I am currently working on has a text-blinking effect. To achieve it I copied the text layer and kept them with the same name. Then I tried to update the text in this animation through the API. But it can only change 1 content. I tried the debug problem and I found that the getkeypath of the API seems to have an iterative logic problem. In the structure of the entire animation json file, the type of the layer is comp-comp-comp-[text layer, text layer]. But the log result of the api node_type is renderer-layer-property-property. I tried to get the node_type with the actual project, but the structure I found was always renderer-layer-property......property. This is the first point I think is problematic.This is my update code.

 var mark_='superrocket,p1,p2,33';
    var result="12331133";
    function aaa(){
        var animapi=lottie_api.createAnimationApi(anim);
        var animkp=animapi.getKeyPath(mark_);
        console.log(animkp.getElements());
        for (ae in animkp.getElements()){  
            animkp.getElements()[ae].setText(result,0);
        }    
    }

Continuing the study I found that the _filterLayerByName function had a problem with the node not being found during the second iteration. The problem is that the elements remain unchanged after the second iteration, and are always a content, which causes element.getTargetLayer().data.nm to always be a superrocket, rather than the correct iteration of the child. So both nodeByname and nodeByType are 0, and then all node_types are property after the third iteration. So it can only get one goal instead of all.

But since getkeypath is the core interface of the entire API, its iterative logic includes more complex effects on other functions. So in a short time, I have not found a solution to fix this bug.
ae file.zip

Change the player container

@bodymovin
Hi,
At first let me thank you for this terrific and amazing plugin! :)
I want to use it as a hover effect in my new project.
there are many DIVs in my html and I want my animation plays in each div when mouse goes over it. actually I need to change the container of my player.
I tried to change the container parameter in a javascript function that I called in onMouseOver() event but it didn't work.
is there any way solve this problem?

Change color dynamically in lottie json

Hi all,
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.

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?

@bodymovin @lottie-api @lottie-web

parent is not defined