| Filename extension | json |
|---|---|
| Developed by | Hernan Torrisi |
| Initial release | 2015 |
| Type of format | Vector animation |
| Extended from | JSON, Adobe After Effects |
| Extended to | dotLottie |
| Website | airbnb |
Lottie is a file format for vector graphics animation, and is named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation. [1]
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]
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 - ThorVG began to support the Lottie rendering feature. [13]
2024 - The Lottie Animation Community has been established to standardize the file format. [14]
2024 - The npm package lottie-player, that allowed playing animations in hosting web pages, was temporarily compromised to insert code that targeted cryptocurrency holders. [15]
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}]}]}| Filename extension | .lottie |
|---|---|
| Initial release | 2020 |
| Type of format | Vector 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]
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.
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 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 backends. Cairo uses hardware acceleration when available.
Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as an easy-to-read markup language. Markdown is widely used for blogging and instant messaging, and also used elsewhere in online forums, collaborative software, documentation pages, and readme files.
Poppler is a free and open-source software library for rendering Portable Document Format (PDF) documents. Its development is supported by freedesktop.org. Commonly used on Linux systems, it powers the PDF viewers of the GNOME and KDE desktop environments.
QtJambi is a Java binding of the cross-platform application framework Qt. It enables Java developers to use Qt within the Java programming language. In addition, the QtJambi generator can be used to create Java bindings for other Qt libraries and future versions of Qt. Unlike GTK, there are no Swing LAF implementations that use Qt for rendering.
Qbs is a cross-platform free and open-source software for managing the build process of software. It was designed to support large, complex projects, written in any number of programming languages, primarily C/C++.
Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.
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.
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).
npm is a package manager for the JavaScript programming language maintained by npm, Inc., a subsidiary of GitHub. npm is the default package manager for the JavaScript runtime environment Node.js and is included as a recommended feature in the Node.js installer.
mpv is free and open-source media player software based on MPlayer, mplayer2 and FFmpeg. It runs on several operating systems, including Unix-like operating systems and Microsoft Windows, along with having an Android port called mpv-android. It is cross-platform, running on ARM, MIPS, PowerPC, RISC-V, s390x, x86/IA-32, x86-64, and some other by 3rd party.
JSON Web Token is a proposed Internet standard for creating data with optional signature and/or optional encryption whose payload holds JSON that asserts some number of claims. The tokens are signed either using a private secret or a public/private key.
Electron is a free and open-source software framework developed and maintained by OpenJS Foundation. The framework is designed to create desktop applications using web technologies that are rendered using a version of the Chromium browser engine and a back end using the Node.js runtime environment. It also uses various APIs to enable functionality such as native integration with Node.js services and an inter-process communication module.
gulp is an open-source JavaScript toolkit, used as a streaming build system in front-end web development.
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."
Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software developed by Photon Storm.
Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
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 is a cross-platform open-source software development library. The library was made to create graphical applications and games.
 | This animation-related article is a stub. You can help Wikipedia by expanding it. |