Lottie animation player SNIPPET

Made a quick POC on a lazy Sunday afternoon (too hot to be outside).

I was watching youtube and saw another video recommendation about using Lottie, I had seen it years ago and forgot all about once one of my work colleagues who worked Adobe Premiere left.

It pretty simple too display them, the real work is making them.

[[lottiePlayer? &id=`robotAnimation` &lottieJSON=`https://assets9.lottiefiles.com/packages/lf20_3vbOcw.json` &autoplay=`1` &loop=`1`]]

This snippet uses the Lottie Web Player. The json files can be local or remote.

There is also the original player.

[[lottieFilesPlayer? &id=`celebrateAnimation` &lottieJSON=`https://assets4.lottiefiles.com/packages/lf20_aEFaHc.json` &autoplay=`1` &loop=`1`]]

Same format mostly, the Lottie Web Player has a few more features and can have more functionality added through javascript.

I spun up a quick cloud site to build here.

And a screenshot when I no longer have the site up and running.

1 Like
1 Like

VERY nice! Never heard of Lottie before, thanks! :smiley:

As I don’t completely understand the difference between the two players: you would recommend using the “Lottie Web Player”, aka lottiePlayer?

The only difference is really is which javascript library it loads to play the Lottie file. I thought one was proprietary and added the original one developed at Airbnb, but as it turns out they are both open-source. The one from Lottie Files seems to have some additional features.

I think I mixed them up in my description. I would use the lottieFilesPlayer it has support for controls and more documentation.

1 Like

Thank you very much for the explanation :heart: