Lottie animations have taken the world by storm! It seems like everyone has already adopted them, and for good reason. This open-source animation file format is lightweight and high in quality, making it easy to bring engaging and interactive experiences to any app or website.
Over the last year, we have seen massive growth popularity and versatility of the Lottie animation ecosystem. The Lottie format has gained popularity, with three dominant Lottie players having a collective total of over 87,000 stars on GitHub projects.
Lottie is adopted across mobile and web platforms, which has made it nearly ubiquitous, establishing it as a leading format in the field of motion.
As with any significant piece of technology, Lottie continues to grow and evolve, with developers exploring the open-source file format and contributing to ever more creative ways to use them. Let’s take a look at some significant changes in the ecosystem.
The Lottie format
Lottie animations are shipped as JSON files - an easily accessible and human-readable format with extensive support and tooling. It affords developers easy access to debug and manually modify a file if they need to.
Additionally, being based on JSON files means it lends itself to tooling and automation. For example, the Lottie-schema can be used for automated validation of the output JSON from various tools, code-generation and so on.
The Lottie format documentation - Lottie Docs has received a major update and is more comprehensive than ever. Lottie Docs cover the format extensively, providing comprehensive and interactive examples of various structures in Lottie. Additionally, we now also provide a Lottie JSON editor which can help you debug issues easily.
Our Lottie Docs also contains a section on Advanced Interactions, featuring in-depth coverage of complex topics with interactive examples related to using Lottie to create awesome designs.
This includes using CSS to theme or apply changes to Lottie at runtime, and expressions and JS to interact with the Lottie to expand on its already impressive capabilities. To prove this, we even add a playable mini-port of Doom, built entirely in Lottie.
dotLottie
dotLottie is a packaging format that takes Lottie animations, their supporting assets, and metadata to be compressed using the deflate algorithm and bundled together into a single, easy-to-use file. This format is designed to streamline distribution and make it more efficient.
dotLottie is now officially supported by lottie-android and lottie-iOS. It is also available for the web using our dotLottie-components support component. You can also download any public and private animations within LottieFiles, in a dotLottie format. If you wish you can also convert your JSON file to dotLottie in a matter of few seconds.
We are currently preparing for the release of v2 of the dotLottie specifications, which will bring the following notable features:
- Multiple Lottie support: Ability to package multiple animations together
- Asset sharing: Extract common resources across multiple animations into a single asset for efficient storage and retrieval
- Playlisting and interactive sequencing
- Theming support: Ship custom themes independent of the animation, and apply them to the animation at runtime.
Additionally, dotLottie tools have improved significantly with better-streamlined dependencies, making for a lighter bundle. We have also significantly improved performance by adding background tasks and web workers during loading of dotLottie files.
The Lottie Players
All of the Lottie players have received significant updates. Let’s highlight some of the notable changes in individual players which brings significant improvements to how we consume Lottie animations.
Lottie-web
There have been a lot of changes and improvements to lottie-web, which is the predominant player component used on web platforms.
Apart from bug fixes and performance improvements, lottie-web has introduced a new canvas worker feature, which enables the configuration of the player as a worker. This yields significant performance gains making page interactions smoother.
For a full list of changes are available on the lottie-web changelog.
Lottie-android
Lottie android’s handling of animations bundled in .zip gained the capability to ship images and fonts. It also shopped improvements to how gradients are handled, and granular controls over the network caching mechanism.
Most excitingly, support for text has shipped with version 6.0! You can also check out more details on the lottie-andriod changelog.
Lottie-iOS
Lottie-iOS underwent perhaps the most significant improvements, having a complete rewrite of its rendering engine that now uses Core Animation. This update represents a substantial improvement to the iOS platform. Coupled with a ~2x more efficient parser, the performance boost is significant!
Skottie
Skottie is the Skia implementation of Lottie by Google. Skia is a complete 2D rendering engine used extensively across Google’s ecosystem of products. Skottie is currently the leader in Lottie feature support, as can been seen on canilottie.com.
Can I Lottie
Can I Lottie is an effort to document which Lottie features are supported for a given player. It breaks it down by player version, making it easy to get a snapshot view of what will and will not work before you hand off the animation to the developer.
Building on top of Can I Lottie, our Lottie feature-checker can tell you what features are being used in a given Lottie. Today, this technology is integrated into our plugins, allowing to obtain a compatibility report. This can help you diagnose possible issues when you export a Lottie plugin, thus allows you to save time and effort.
Create Lottie animation with ease
As with other areas, the tools and features has received some updates.
LottieFiles offers a range of features that aim to provide a seamless Lottie experience and streamline the motion design process for its users. Let’s look at some of these features.
- Lottie Creator: This browser-based tool is currently on a waitlist, it aims to enable both motion and non-motion designers to create high-quality, lightweight, powerful, and interactive motion designs.
- Integration and plugins: As a designer or developer, you will have a special place for your favorite tools. Our LottieFiles integration and plugins aim to help create, edit, render, design, collaborate, and implement Lottie animations with ease with them. Some of the highlightable ones include our LottieFiles plugins for Figma, Webflow, Adobe and more.
- Lottie Editor: Lottie Editor streamlines editing and adjusting Lottie animations without writing any codes, enabling users to alter colors, optimize or hide layers, and apply changes to their animation without prior experience.
- LottieFiles Mobile app: LottieFiles Mobile app makes it possible to create motion designs on the go. The motion canvas is ideal for quickly creating social media design templates, stickers for communication purposes, and more, enabling users to integrate motion into their day-to-day lives more easily.
- LottieFiles platform: The LottieFiles platform offers a collaborative space to create store and organize your animations.
- Lottie Optimizer: Due to its vector based nature, Lottie animations are comparatively smaller than their raster based counterparts - resulting in a file format that is efficient and easily scalable. With the Lottie Optimizer tool, you can help you trim your Lottie down and by as much as 74%.
Built with Lottie
Taking a tour around popular apps and platforms, we can see the adoption has been steadily increasing. Lottie is used widely, from simple "like" animations on social media platforms like Twitter and YouTube to use cases such as stickers on Telegram.
Today we have over 5.2 million users from 250,000+ companies worldwide, including industry leaders such as Google, Airbnb, Disney, DuoLingo, Toss, Instacart and more. Some of these companies are highlighted in our showcase.
We hope you that you were able to gain all the knowledge behind the Lottie building block. If you want you showcase your project share with us at #BuiltWithLottie.
