What is the community's consensus on which web player to use?

Lottie in Web
1

New to Lottie here. I am implementing a lottie in a react app.
Lottie seems very interesting, but it seems there are at least 2 main options for displaying lotties on the web.
I’ve found the following:
Lottie-web: GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/.
JS implementation?
Just a comment but the documentation could probably be improved as it seems bodymovin is mixed in with lottie everywhere? What was the intention of this?
Lottie Player: GitHub - LottieFiles/lottie-player: Lottie viewer/player as an easy to use web component! https://lottiefiles.com/web-player
Seems like a little bit simpler of an api, many stars on github. LottieFiles site seems to recommend this approach?

So what are the differences here and is one prefered over the other?
Thanks

2

Hi Kyle,

If you want to use Lottie in your react app, a good idea is to use Lottie-react player GitHub - LottieFiles/lottie-react: lottie web player as a react component

To answer your question, under the hood of LottieFiles Lottie Player, its still Lottie-web. We have packaged it to make it easier for developers to implement/embed the player in their projects. The mention of bodymovin is because its the former name given to the “lottie-web” library.

If you plan to use multiple animations in one page, Lottie-player seems to be more performance compared to all others.

Hope this clears out some confusions.

3

Got it. Thanks for clarifying.
It seems like the 1st class web support from the maintainers on this is not really present / up to date? - i’d love to see some references to these choices in the official documentation if someone gets around to it.

4

Hi Nattu
I allso whonder wicth approch is the best and most performance effective.

How can Lottie Player be more perfoemance effective than Lottie-web if its based on Lottie-web?

I’m doing a lot of scroll solutions an I whonder if the function “seek” in Lotti-Player is the same as “goToAndStop”. Is it the same code or is one more newer and effective then the other?

5

I’m not a developer by any means but I have been very curious about the different Lottie Players and how they work. Your comment helped my curiosity a bit. It’s helpful to understand how Lottie players work

6

I’ve used both and the Lottie Player players renders things differently than what I would expect for some Lottie animations.
I don’t have such issues with the Lottie-web (airbnb) player.

Under the hood I know that the former uses the latter, but I still don’t get why the results are different. It’s very frustrating, and it must be something done in the wrapper.