Lottie (file format)

<h2 id="description">Description</h2>
Lottie is based in <a href="/facts/JSON/bs1rUAhd">JSON</a> but Lottie files use keys of 1–2 characters in length and are not readable by humans.
It is intended as a lighter alternative to <a href="/facts/Animated_GIF/HfIBWrIC">animated GIFs</a> and <a href="/facts/APNG/3DWjB2s5">APNG</a> files for use in the web and mobile and desktop applications.
Being vectorial it is independent of the device resolution.
It can also include <a href="/facts/Raster_graphic/HkXNc8oI">raster graphic</a> elements.
It also allows for the inclusion of interactive elements.<a class="footnote-ref" id="fnref:2" href="#fn:2">2</a>
The different player implementations have tradeoffs between CPU, GPU and memory usage.<a class="footnote-ref" id="fnref:3" href="#fn:3">3</a>

<h2 id="history">History</h2>
2015 - Hernan Torrisi released a plugin named Bodymovin<a class="footnote-ref" id="fnref:4" href="#fn:4">4</a> for the animation software Adobe <a href="/facts/After_Effects/Xr4G0bjX">After Effects</a> that serialized animations as JSON to be rendered at runtime.
It supports some but not all of the features of the internal format of After Effects.<a class="footnote-ref" id="fnref:5" href="#fn:5">5</a>
Additionally, Torrisi released a renderer for the format with a <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a>-based player for modern browsers. <a class="footnote-ref" id="fnref:6" href="#fn:6">6</a> <a class="footnote-ref" id="fnref:7" href="#fn:7">7</a>
2017 - it was the work of engineers Brandon Withrow (iOS), Gabriel Peal<a class="footnote-ref" id="fnref:8" href="#fn:8">8</a> (Android), and Leland Richardson (React Native) along with lead animator Salih Abdul-Karim at <a href="/facts/AirBnB/EP95k6Rr">AirBnB</a> that saw the creation of the first Lottie libraries<a class="footnote-ref" id="fnref:9" href="#fn:9">9</a> to render the animations in different platforms.<a class="footnote-ref" id="fnref:10" href="#fn:10">10</a>
Other companies have provided support for more platforms.<a class="footnote-ref" id="fnref:11" href="#fn:11">11</a>
2018 - <a href="/facts/Microsoft/nGIDDXdx">Microsoft</a> and the <a href="/facts/.NET_Foundation/X7cE1qXM">.NET Foundation</a> released a library<a class="footnote-ref" id="fnref:12" href="#fn:12">12</a> for rendering Lottie on <a href="/facts/Microsoft_Windows/bwhAhuSL">Windows</a>.
2019 - further support for Lottie was by Qt<a class="footnote-ref" id="fnref:13" href="#fn:13">13</a> with the release of a QML API for rendering Lottie. Later that same year, <a href="/facts/Samsung/oNXUwDjn">Samsung</a> released rLottie<a class="footnote-ref" id="fnref:14" href="#fn:14">14</a> which is a platform independent C++-based renderer for Lottie, and added Lottie support in <a href="/facts/Tizen/gNrC0mnG">Tizen</a>. A <a href="/facts/Python_(programming_language)/YbuGqofa">Python</a> framework to work with the format was also released this year.<a class="footnote-ref" id="fnref:15" href="#fn:15">15</a>
2020 - dotLottie was created. This open-source file format combines multiple Lottie files and all their supporting resources into a single file.
2023 - ThorVG began to support the Lottie rendering feature. <a class="footnote-ref" id="fnref:16" href="#fn:16">16</a>
2024 - The Lottie Animation Community has been established to standardize the file format.<a class="footnote-ref" id="fnref:17" href="#fn:17">17</a>
2024 - The <a href="/facts/Npm/DdAuC7wt">npm</a> package lottie-player, that allowed playing animations in hosting web pages, was temporarily compromised to insert code that targeted <a href="/facts/Cryptocurrency/Rg6JAS8y">cryptocurrency</a> holders.<a class="footnote-ref" id="fnref:18" href="#fn:18">18</a>

<h2 id="example">Example</h2>
This code will produce a 512 pixel image of the above circle:

{
 "v": "5.7.1",
 "ip": 0,
 "op": 180,
 "nm": "Animation",
 "fr": 60,
 "w": 512,
 "h": 512,
 "layers": [
 {
 "ddd": 0,
 "ty": 4,
 "ind": 0,
 "st": 0,
 "ip": 0,
 "op": 180,
 "nm": "Layer",
 "ks": {
 "a": {
 "a": 0,
 "k": [
 256,
 256
 ]
 },
 "p": {
 "a": 0,
 "k": [
 256,
 256
 ]
 },
 "s": {
 "a": 0,
 "k": [
 100,
 100
 ]
 },
 "r": {
 "a": 0,
 "k": 0
 },
 "o": {
 "a": 0,
 "k": 100
 }
 },
 "shapes": [
 {
 "ty": "el",
 "nm": "Ellipse",
 "d": 1,
 "p": {
 "a": 0,
 "k": [
 256,
 256
 ]
 },
 "s": {
 "a": 0,
 "k": [
 256,
 256
 ]
 }
 },
 {
 "ty": "st",
 "nm": "Stroke",
 "o": {
 "a": 0,
 "k": 100
 },
 "c": {
 "a": 0,
 "k": [
 0.114,
 0.157,
 0.282
 ]
 },
 "lc": 2,
 "lj": 2,
 "ml": 0,
 "w": {
 "a": 0,
 "k": 20
 }
 },
 {
 "ty": "fl",
 "nm": "Fill",
 "o": {
 "a": 0,
 "k": 100
 },
 "c": {
 "a": 0,
 "k": [
 0.196,
 0.314,
 0.690
 ]
 },
 "r": 1
 }
 ]
 }
 ]
}

<h2 id="the-dotlottie-file-format">The dotLottie file format</h2>

In 2020, the dotLottie file format was proposed as <a href="/facts/Container_format_(computing)/mSfwwdSA">a standard way to pack</a> Lottie files with other resources.
The file is actually a zip file compressed with the <a href="/facts/Deflate_(compression)/XnBt1GKV">deflate</a> method.
It includes a <a href="/facts/Manifest_file/h8PEdvVx">manifest file</a> and preview images to ease the manipulation of the files.
<a class="footnote-ref" id="fnref:19" href="#fn:19">19</a>

<h2 id="external-links">External links</h2>
<ul><li><a href="https://lottie.github.io">Official website</a> by the Lottie Animation Community</li>
<li><a href="https://lottiefiles.github.io/lottie-docs/">A Human's guide to the Lottie format</a> Extensive documentation of the format</li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1">"What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022. <a href="https://lottiefiles.com/what-is-lottie" target="_blank">https://lottiefiles.com/what-is-lottie</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></li>
<li id="fn:2">"What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022. <a href="https://lottiefiles.com/what-is-lottie" target="_blank">https://lottiefiles.com/what-is-lottie</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></li>
<li id="fn:3">Biørn-Hansen, Andreas; Grønli, Tor-Morten; Ghinea, Gheorghita (5 May 2019). "Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance". Sensors. 19 (9): 2081. Bibcode:2019Senso..19.2081B. doi:10.3390/s19092081. PMC 6539844. PMID 31060290. <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6539844" target="_blank">https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6539844</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></li>
<li id="fn:4">Torrisi, Hernan (15 December 2021). "bodymovin-extension". GitHub. Retrieved 11 January 2022. <a href="https://github.com/bodymovin/bodymovin-extension" target="_blank">https://github.com/bodymovin/bodymovin-extension</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></li>
<li id="fn:5">"Introducing dotLottie". dotlottie.io. Retrieved 11 January 2022. <a href="https://dotlottie.io/intro/" target="_blank">https://dotlottie.io/intro/</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></li>
<li id="fn:6">"What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022. <a href="https://lottiefiles.com/what-is-lottie" target="_blank">https://lottiefiles.com/what-is-lottie</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></li>
<li id="fn:7">"bodymovin-extension". December 15, 2021 – via GitHub. <a href="https://github.com/bodymovin/bodymovin-extension" target="_blank">https://github.com/bodymovin/bodymovin-extension</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></li>
<li id="fn:8">Behind the Creation of Lottie, retrieved 2022-02-17 <a href="https://www.youtube.com/watch?v=I2zhX4NuV_I" target="_blank">https://www.youtube.com/watch?v=I2zhX4NuV_I</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></li>
<li id="fn:9">"Lottie Docs". airbnb.io. Retrieved 2021-12-14. <a href="https://airbnb.io/lottie/" target="_blank">https://airbnb.io/lottie/</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></li>
<li id="fn:10">"Lottie". Lottie. AirBnB. Retrieved 11 January 2022. <a href="https://airbnb.design/lottie/" target="_blank">https://airbnb.design/lottie/</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></li>
<li id="fn:11">"What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022. <a href="https://lottiefiles.com/what-is-lottie" target="_blank">https://lottiefiles.com/what-is-lottie</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></li>
<li id="fn:12">"Lottie-Windows". December 15, 2021 – via GitHub. <a href="https://github.com/CommunityToolkit/Lottie-Windows" target="_blank">https://github.com/CommunityToolkit/Lottie-Windows</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></li>
<li id="fn:13">"Announcing QtLottie". www.qt.io. <a href="https://www.qt.io/blog/2019/03/08/announcing-qtlottie" target="_blank">https://www.qt.io/blog/2019/03/08/announcing-qtlottie</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></li>
<li id="fn:14">"rlottie: A New Approach to Motion Graphics". YouTube. <a href="https://www.youtube.com/watch?v=Q2c7Hj_Sa1o" target="_blank">https://www.youtube.com/watch?v=Q2c7Hj_Sa1o</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></li>
<li id="fn:15">"python-lottie Changelog". 24 December 2023 – via GitLab. <a href="https://gitlab.com/mattbas/python-lottie/-/blob/master/CHANGELOG.md" target="_blank">https://gitlab.com/mattbas/python-lottie/-/blob/master/CHANGELOG.md</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></li>
<li id="fn:16">"thorvg 0.10.0 release note" – via Github. <a href="https://github.com/thorvg/thorvg/releases/tag/v0.10.0" target="_blank">https://github.com/thorvg/thorvg/releases/tag/v0.10.0</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></li>
<li id="fn:17">"Lottie as a standard with Lottie Animation Community (LAC) format specification body". <a href="https://lottie.github.io/news/announcing-lottie-animation-community/" target="_blank">https://lottie.github.io/news/announcing-lottie-animation-community/</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></li>
<li id="fn:18">Lakshmanan, Ravie (Oct 31, 2024). "LottieFiles Issues Warning About Compromised "lottie-player" npm Package". The Hacker News. Retrieved 1 November 2024. <a href="https://thehackernews.com/2024/10/lottiefiles-issues-warning-about.html" target="_blank">https://thehackernews.com/2024/10/lottiefiles-issues-warning-about.html</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></li>
<li id="fn:19">"Introducing dotLottie". dotlottie.io. Retrieved 11 January 2022. <a href="https://dotlottie.io/intro/" target="_blank">https://dotlottie.io/intro/</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></li>
</ol>

Lottie (file format) open-in-new

Lottie (file format)