Lottie is a file format for

vector graphics Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display ...

animation, and is named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation.

Description

Lottie is based in

JSON JSON (JavaScript Object Notation, pronounced ; also ) is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays (or other s ...

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 GIF The Graphics Interchange Format (GIF; or , see pronunciation) is a bitmap image format that was developed by a team at the online services provider CompuServe led by American computer scientist Steve Wilhite and released on 15 June 1987 ...

s and

APNG Animated Portable Network Graphics (APNG) is a file format which extends the Portable Network Graphics (PNG) specification to permit animated images that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transpare ...

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 file:Rgb-raster-image.svg, upright=1, The Smiley, smiley face in the top left corner is a raster image. When enlarged, individual pixels appear as squares. Enlarging further, each pixel can be analyzed, with their colors constructed through comb ...

elements. It allows to be programmed and interactive. The different player implementations have tradeoffs between CPU, GPU and memory usage.

History

2015 - Hernan Torrisi released a plugin named ''Bodymovin'' for the animation software Adobe

After Effects Adobe After Effects is a digital visual effects, motion graphics, and compositing application developed by Adobe Inc., and used in the post-production process of film making, video games and television production. Among other things, After Eff ...

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. Additionally, Torrisi released the a renderer for the format with a

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

based player for modern browsers. 2017 - it was the work of engineers Brandon Withrow (iOS), Gabriel Peal (Android), and Leland Richardson (React Native) along with lead animator Salih Abdul-Karim at

AirBnB Airbnb, Inc. ( ), based in San Francisco, California, operates an online marketplace focused on short-term homestays and experiences. The company acts as a broker and charges a commission from each booking. The company was founded in 2008 by ...

that saw the creation of the first Lottie libraries to render the animations in different platforms. Other companies have provided support for more platforms. 2018 -

Microsoft Microsoft Corporation is an American multinational corporation, multinational technology company, technology corporation producing Software, computer software, consumer electronics, personal computers, and related services headquartered at th ...

and the

.NET Foundation The .NET Foundation is an organization incorporated on March 31, 2014, by Microsoft to improve open-source software development and collaboration around the .NET Framework. It was launched at the annual Build 2014 conference held by Microsoft. T ...

released a library for rendering Lottie on

Windows Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ...

. 2019 - further support for Lottie was by Qt with the release of a QML API for rendering Lottie. Later that same year,

Samsung The Samsung Group (or simply Samsung) ( ko, 삼성 ) is a South Korean multinational manufacturing conglomerate headquartered in Samsung Town, Seoul, South Korea. It comprises numerous affiliated businesses, most of them united under the ...

released rLottie which is a platform independent C++-based renderer for Lottie, and added Lottie support in

Tizen Tizen () is a Linux-based mobile operating system backed by the Linux Foundation, mainly developed and used primarily by Samsung Electronics. The project was originally conceived as an HTML5-based platform for mobile devices to succeed MeeGo ...

. A Python framework to work with the format was also released this year. 2020 - dotLottie was created. This open-source file format combines multiple Lottie files and all their supporting resources into a single file.

Example

This code will produce the circle shown in the image:

The dotLottie file format

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 A manifest file in computing is a file containing metadata for a group of accompanying files that are part of a set or coherent unit. For example, the files of a computer program may have a manifest describing the name, version number, license and t ...

and preview images to ease the manipulation of the files.

References

External links

* by the Lottie animation communities
A Human's guide to the Lottie format
Extensive documentation of the format {{Animation-stub Computer-related introductions in 2015 2D animation software Vector graphics file formats Adobe software JSON