Lottie Specifications and Information

This week I began looking into Lottie and how I could utilise it for animations on my site. I quickly realised that there wasn’t an easy way to use these animations other then using javascript libraries that exist. I wanted to use something that was native to .NET.

While I am working on building a native library I thought it would be good to collate the information around the Lottie framework and specifications of the file format.

Lottie, What is it?

Lottie is a library that displays animations. You can build animations in Adobe After Effects and export them into a lightweight vector animation format.

Airbnb who built Lottie describes it on there website as follows; “Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.”

How does it work?

Lottie uses a plugin called BodyMovin ‌‌website here which renders the after effects animations into a vector format that is small but very powerful. Lottie is then the player that can read these files and display them in a flexible player.

The File Specification.

Now as mentioned I wanted a native way to do this within Blazor. However at the time of writing this post there wasn’t a component vendor out there that had implemented a “Lottie Player”, I decided to look at this one myself and began with understanding the File format.

Now I won’t re-create the specification here but initially looking at it I couldn’t understand what each component of it meant.

{
    "v": "5.7.4",
    "fr": 29.9700012207031,
    "ip": 0,
    "op": 70.0000028511585,
    "w": 500,
    "h": 500,
    "nm": "GlennHevey_LoadingLogo",
    "ddd": 0,
    "": [],
    "layers": [
	    {
		...
		}
	]
		...
}

I could guess but luckily for me there is lovely person by the name of marcusstenbeck over on GitHub who put together a list of references. Original comment link I have provided the list of these below. I will update this list with any other relevant information as I come across it. These sites do a fantastic job explaining the format and I am currently using them to build my library.

File format references

If you have any other resources you think will be useful for either the BodyMovin plugin or Lottie hit me up on twitter