Lottie (file format)

Last updated
Lottie
Filename extension
json
Developed byHernan Torrisi
Initial release2015
Type of formatVector animation
Extended from JSON, Adobe After Effects
Extended todotLottie
Website https://airbnb.io/lottie
Lotte Reiniger in 1939 Lotte Reiniger 1939.jpg
Lotte Reiniger in 1939

Lottie is a file format for vector graphics animation, and is named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation. [1]

Contents

Description

Lottie is based in JSON 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 animated GIFs and APNG files for use in the web and mobile and desktop applications. Being vectorial it is independent of the device resolution. It can also include raster graphic elements. It also allows for the inclusion of interactive elements. [1]

The different player implementations have tradeoffs between CPU, GPU and memory usage. [2]

History

2015 - Hernan Torrisi released a plugin named Bodymovin [3] for the animation software Adobe After Effects 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. [4] Additionally, Torrisi released a renderer for the format with a JavaScript based player for modern browsers. [1] [5]

2017 - it was the work of engineers Brandon Withrow (iOS), Gabriel Peal [6] (Android), and Leland Richardson (React Native) along with lead animator Salih Abdul-Karim at AirBnB that saw the creation of the first Lottie libraries [7] to render the animations in different platforms. [8]

Other companies have provided support for more platforms. [1]

2018 - Microsoft and the .NET Foundation released a library [9] for rendering Lottie on Windows.

2019 - further support for Lottie was by Qt [10] with the release of a QML API for rendering Lottie. Later that same year, Samsung released rLottie [11] which is a platform independent C++-based renderer for Lottie, and added Lottie support in Tizen. A Python framework to work with the format was also released this year. [12]

2020 - dotLottie was created. This open-source file format combines multiple Lottie files and all their supporting resources into a single file.

2023 - Thor Vector Graphics (ThorVG) one of the vector graphics library began to support the Lottie rendering feature. [13]

2024 - The Lottie Animation Community has been established to standardize the file format. [14]

Example

Lottie basic example.png

This code will produce the circle shown in the image:

{"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}]}]}

The dotLottie file format

dotLottie
Filename extension
.lottie
Initial release2020
Type of formatVector animation
Container for Lottie
Extended from Zip file
Website https://dotlottie.io/

In 2020, the dotLottie file format was proposed as a standard way to pack Lottie files with other resources. The file is actually a zip file compressed with the deflate method. It includes a manifest file and preview images to ease the manipulation of the files. [4]


Related Research Articles

<span class="mw-page-title-main">KHTML</span> Discontinued web browser engine

KHTML is a discontinued browser engine that was developed by the KDE project. It originated as the engine of the Konqueror browser in the late 1990s, but active development ceased in 2016. It was officially discontinued in 2023.

<span class="mw-page-title-main">KDevelop</span> Integrated development environment

KDevelop is a free and open-source integrated development environment (IDE) for Unix-like computer operating systems and Windows. It provides editing, navigation and debugging features for several programming languages, and integration with build automation and version-control systems, using a plugin-based architecture.

X3D is a set of royalty-free ISO/IEC standards for declaratively representing 3D computer graphics. X3D includes multiple graphics file formats, programming-language API definitions, and run-time specifications for both delivery and integration of interactive network-capable 3D data. X3D version 4.0 has been approved by Web3D Consortium, and is under final review by ISO/IEC as a revised International Standard (IS).

<span class="mw-page-title-main">Inkscape</span> Free open-source vector graphics editor

Inkscape is a free and open-source vector graphics editor for traditional Unix-compatible systems such as GNU/Linux, BSD derivatives and Illumos, as well as Windows and macOS. It offers a rich set of features and is widely used for both artistic and technical illustrations such as cartoons, clip art, logos, typography, diagramming and flowcharting. It uses vector graphics to allow for sharp printouts and renderings at unlimited resolution and is not bound to a fixed number of pixels like raster graphics. Inkscape uses the standardized Scalable Vector Graphics (SVG) file format as its main format, which is supported by many other applications including web browsers. It can import and export various other file formats, including SVG, AI, EPS, PDF, PS and PNG.

DOT is a graph description language, developed as a part of the Graphviz project. DOT graphs are typically stored as files with the .gv or .dot filename extension — .gv is preferred, to avoid confusion with the .dot extension used by versions of Microsoft Word before 2007. dot is also the name of the main program to process DOT files in the Graphviz package.

Cairo (graphics) Vector graphics-based software library

Cairo is an open-source graphics library that provides a vector graphics-based, device-independent API for software developers. It provides primitives for two-dimensional drawing across a number of different back ends. Cairo uses hardware acceleration when available.

<span class="mw-page-title-main">OpenSceneGraph</span>

OpenSceneGraph is an open-source 3D graphics application programming interface, used by application developers in fields such as visual simulation, computer games, virtual reality, scientific visualization and modeling.

id Tech 3 Video game engine

id Tech 3, popularly known as the Quake III Arena engine, is a game engine developed by id Software for their video game Quake III Arena. It has been adopted by numerous games. During its time, it competed with the Unreal Engine; both engines were widely licensed.

<span class="mw-page-title-main">Poppler (software)</span> Free library for creating PDF documents

Poppler is a free software utility library for rendering Portable Document Format (PDF) documents. Its development is supported by freedesktop.org. It is commonly used on Linux systems, and is used by the PDF viewers of the open source GNOME and KDE desktop environments.

<span class="mw-page-title-main">Synfig</span>

Synfig Studio is a free and open-source vector-based 2D animation software. It is created by Robert Quattlebaum with additional contributions by Adrian Bentley.

QML is a user interface markup language. It is a declarative language for designing user interface–centric applications. Inline JavaScript code handles imperative aspects. It is associated with Qt Quick, the UI creation kit originally developed by Nokia within the Qt framework. Qt Quick is used for mobile applications where touch input, fluid animations and user experience are crucial. QML is also used with Qt3D to describe a 3D scene and a "frame graph" rendering methodology. A QML document describes a hierarchical object tree. QML modules shipped with Qt include primitive graphical building blocks, modeling components, behavioral components, and more complex controls. These elements can be combined to build components ranging in complexity from simple buttons and sliders, to complete internet-enabled programs.

<span class="mw-page-title-main">Away3D</span>

Away3D is an open-source platform for developing interactive 3D graphics for video games and applications, in Adobe Flash or HTML5. The platform consists of a 3D world editor, a 3D graphics engine, a 3D physics engine and a compressed 3D model file format (AWD).

Blink is a browser engine developed as part of the Chromium project with contributions from Apple, Google, Meta, Microsoft, Opera Software, Vivaldi Technologies, Adobe, Intel, IBM, Samsung, Huawei and others. It was first announced in April 2013.

Vector tiles, tiled vectors or vectiles are packets of geographic data, packaged into pre-defined roughly-square shaped "tiles" for transfer over the web. This is an emerging method for delivering styled web maps, combining certain benefits of pre-rendered raster map tiles with vector map data. As with the widely used raster tiled web maps, map data is requested by a client as a set of "tiles" corresponding to square areas of land of a pre-defined size and location. Unlike raster tiled web maps, however, the server returns vector map data, which has been clipped to the boundaries of each tile, instead of a pre-rendered map image.

<span class="mw-page-title-main">Natron (software)</span> Open source compositing software

Natron is a free and open-source node-based compositing application. It has been influenced by digital compositing software such as Avid Media Illusion, Apple Shake, Blackmagic Fusion, Autodesk Flame and Nuke, from which its user interface and many of its concepts are derived.

glTF 3D scene and model file format

glTF is a standard file format for three-dimensional scenes and models. A glTF file uses one of two possible file extensions: .gltf (JSON/ASCII) or .glb (binary). Both .gltf and .glb files may reference external binary and texture resources. Alternatively, both formats may be self-contained by directly embedding binary data buffers. An open standard developed and maintained by the Khronos Group, it supports 3D model geometry, appearance, scene graph hierarchy, and animation. It is intended to be a streamlined, interoperable format for the delivery of 3D assets, while minimizing file size and runtime processing by apps. As such, its creators have described it as the "JPEG of 3D."

<span class="mw-page-title-main">Phaser (game framework)</span> Cross-platform JavaScript video game framework

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software developed by Photon Storm.

LÖVE is a free, open-source, cross-platform framework released under the zlib license for developing video games. The framework is written in C++ and uses Lua as its scripting language and is still maintained by its original developers. The framework is cross-platform supporting the platforms Microsoft Windows, macOS, Linux, Android, and iOS.

raylib Game programming library

Raylib is a cross-platform open-source software development library. The library was made to create graphical applications and games.

<span class="mw-page-title-main">Glaxnimate</span> Open-source cross-platform vector animation software

Glaxnimate is a free and open-source, cross-platform, 2D vector animation software.

References

  1. 1 2 3 4 "What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022.
  2. 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.
  3. Torrisi, Hernan (15 December 2021). "bodymovin-extension". GitHub. Retrieved 11 January 2022.
  4. 1 2 "Introducing dotLottie". dotlottie.io. Retrieved 11 January 2022.
  5. "bodymovin-extension". December 15, 2021 via GitHub.
  6. Behind the Creation of Lottie , retrieved 2022-02-17
  7. "Lottie Docs". airbnb.io. Retrieved 2021-12-14.
  8. "Lottie". Lottie. AirBnB. Retrieved 11 January 2022.
  9. "Lottie-Windows". December 15, 2021 via GitHub.
  10. "Announcing QtLottie". www.qt.io.
  11. "rlottie: A New Approach to Motion Graphics". YouTube .
  12. "python-lottie Changelog". 24 December 2023 via GitLab.
  13. "thorvg 0.10.0 release note" via Github.
  14. "Lottie as a standard with Lottie Animation Community (LAC) format specification body".