Questions about lottie.

[bdkoder]

Dear sir, Would anyone please tell me what is the difference between Lottie js and Lottie player js? Below option working on lottie js but not working with lottie player - lottie.loadAnimation({ container: element, // the dom element that will contain the animation renderer: 'svg', loop: true, autoplay: true, path: 'data.json' // the path to the animation json });

How it's possible to works these settings with the Lottie player? And also Lottie Interactivity JS not working with Lottie js, it's only working with Lottie player js, it's why? And why Lottie Interactivity JS doesn't have all the option of Lottie js or Lottie player js? If it has how works all settings on Interactivity js, like frame, renderer type, autoplay, etc.

Advanced thank you.

Regards Shahidul Islam

[karamalie]

Hi @shahidul24

The Lottie player from this repository is different from lottie-web player. The difference is that this player is a web component and utilizes a shadow-dom and therefore has better performance. Could you link me to the "lottie js" vs "lottie player js" so that i could have some clarity as to the libraries you are referring to :)

In terms of implementing and loading the json programmatically.

Insert this into the dom (ensure you have the script loaded on the page as well)

<lottie-player autoplay loop mode="normal" style="width: 320px">
</lottie-player>

on the javascript side. you can load the source of the player like so

const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");

// or load via a Bodymovin JSON string/object
player.load(
  '{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);

Lottie Interactivity would work with both libraries. I would need to see the implementation and a reference to which specific library it is to comment on a fix

[vincentmorneau]

@karamalie Thanks for the explanation.

What is still confusing to me is that lottie-web seem to be updated much more often than lottie-player.

You say "lottie-player utilizes a shadow-dom and therefore has better performance", but is it using an older lottie-web engine?

[AVTPJ]

I'd also like to know in detail what difference there is between lottie-player and lottie-web (https://github.com/airbnb/lottie-web) - especially performance and features. I assume these are two different teams working on these libraries.

On features - does lottie-player have currentFrame method as lottie-web does? I couldn't see the current frame in the frame event either.

[karamalie]

The current @lottiefiles/lottie-player uses the 5.6.6 lottie-web engine. you re right, version is yet to be bumped. Adding to our task list.

The @lottiefiles/lottie-player will support methods and properties mentioned as per this doc https://github.com/LottieFiles/lottie-player . which includes a getLottie() method that returns the instance of the underlying lottie-web engine therefore allowing you to call any properties or methods that the lottie-web engine offers.

These are two different teams working on it correct, the performance difference is that the repo maintained by LottieFiles ie: this repo compiled the player as a web component that renders a shadow dom, cutting down the CPU hit by an estimate of 40% from our observations on the lottiefiles.com web app.

Notes *

1. The performance gains apply ONLY in the SVG renderer mode
2. The shadow DOM mode allows encapsulation of the DOM so that the whole DOM isn't re-rendered when SVG element manpulations occur. In non-shadow mode, it triggers whole document re-renders. It gets very significant when the page has large number of elements and the lottie has large number of elements and changes in the animation run-time.