Happy Anniversary from the Lottie Team
It’s been just over two years since the first release of Lottie iOS and Lottie Android and we have many new releases and announcements to mark its second anniversary. But first, some love. We are overwhelmed by the support and creative feats that have come from the Lottie community. Lottie has grown beyond our wildest dreams, and what everyone has created with it has been nothing short of astounding. Lottie is now used by thousands of companies, large and small, across the world. Motion designers have told us that Lottie has been a game changer for them and their colleagues. For the first time, they are able to ship beautiful animations directly to users and gone are the days where animations get cut due to engineering constraints.
We are so grateful for the community of coders, designers, animators, and creators who keep Lottie alive. 💖
BodyMovin Plugin
Version 5.5.0 of the Bodymovin plugin includes two options to reduce the exported file size. First, we have added the option to drop default transform values. The vast majority of transform properties are never used and can be omitted from the json.
Second, an option has been added to drop properties used by expressions. You should opt to drop these properties if you don’t use expressions or are planning on using any platform except Web because they don’t support expressions.
Our testing has yielded a 33%+ reduction in file sizes. This reduction not only enables you to ship smaller apps but also improves deserialization performance.
Web
Lottie Web has a number of new bug fixes and may soon get support for merge paths. In addition, early exploration has begun on a new WebGL renderer.
On Lottie Web, there are not significant news for now. Some bug fixes have landed. Hopefully soon merge paths will be supported (with a dependency on the Paper.js library), and further down the road, there are plans for a new WebGL renderer.
Android
by Gabriel Peal
Lottie 3.0 on Android is the fastest, most stable, and feature packed release yet. Significant progress has been made on all three fronts so every app will benefit in some way from upgrading.
In addition to many bug fixes, Lottie Android now supports skew, markers, multiple trim paths intersect and inverted masks, multiple masks, and dynamic properties on rectangles and gradient colors. In addition, Android can now properly render centered text, multiline text, and emoji characters.
All animations will also benefit from many performance improvements. Advanced profiling has led to improved internal caching and the elimination of all runtime object allocations. In addition, animations with mattes and masks now render 2–10x faster than they did on 2.8.0.
Just like Lottie iOS, Lottie Android is tested against a repository with over 2000 animations and every single animation renders the same or more accurately than 2.8.0.
We encourage you to check out the full changelog and start upgrading your apps!
iOS and MacOS — Now in Swift!
Lottie 3.0 on iOS is a complete rewrite of Lottie in Swift! The first version of Lottie was completed in Objective-C just after Swift had been released. Swift adoption at major companies was still pretty low at the time. We have been dreaming of rewriting Lottie in Swift since the first release. Rewriting from the ground up provided an opportunity to refactor the render system and unblock many features that we have been hoping to add to Lottie for a long time. In addition to rewriting the existing library in full, several new features have been added to iOS, not to mention countless bug fixes.
Rewriting a library currently in use by thousands of consumers is a daunting task. With so many consumers and so many different animations, every keystroke is fraught with potential for error. We couldn’t have confidently written a single line without a solid series of tests to ensure that nothing was broken. Lottie-iOS has a private repo of unit tests and visual regression tests that run through over two thousand animations to ensure accuracy and stability. Each animation was loaded and a series of screenshots were created using the most recent Objective-C version of Lottie and the new Swift version. The screenshots were compared and reported an error if even one pixel was off. Of course with the addition of new features, and improvements to the render system, some pixels were off. After culling out any false negatives, we are pleased to say that all of the tests are currently passing.
We have always envisioned Lottie as an open-source library. We believe that open source software is extremely important. For many people learning to code, open source software is the best opportunity they have to read and try industry quality code. Learning to read code and trying to understand how a system worked is a pivotal part of learning to code. We wanted the Swift rewrite of Lottie to embrace open-source, and encourage anyone who has a passion for animation to contribute. In addition to updating the existing documentation, we have created new technical documentation that provides a look into the workings of Lottie. The documentation explains at a fairly high level how Lottie-Swift is structured. Our hope is that it encourages further contribution.
New Features:
- A complete rewrite in Swift
- New documentation fully covers Lottie API
- Text rendering (no glyphs) now supported
- Gradient Stroke now supported
- Individual Trim Paths now supported
- Alpha Inverted Masks now supported
- Marker support
- Skew transform now supported
- Fully support all UIView content modes
- New API for dynamic properties
- Animation now fully supports Codable, JSON decoding and encoding
- Animated Button component
- New more flexible ImageProvider
- Play animations in their native frame rate
- Read animation progress in realtime
- Spatial Interpolation now more accurate
- Added API for getting animation properties
- Rewritten render system, fixing many bugs
- JSON Decoding supports Default values
- JSON Coding unit testing
- Trim paths are now more accurate
- Bug fixes, bug fixes, bug fixes!
Windows
At Microsoft, we’re fans of the inspiring community that has grown around Bodymovin and Lottie, and we’re excited to announce that we’re bringing Lottie to Windows! We strongly believe that, as application creators, you should be empowered to create user experiences that are delightful and functional, easily. With Lottie, we now have a community-driven solution that minimizes both performance and engineering costs for shipping animations that make your Windows applications more engaging, more intuitive, and more fun.
We built Lottie-Windows using the Windows.UI.Composition APIs, which means that all rendering and animation is independent of your application’s process, resulting in smooth 60fps motion and resolution-independent visual results on the wide variety of Windows devices.
In addition to consuming Bodymovin JSON files, Lottie-Windows also allows you to generate C# or C++ code — an approach that we recommend for even better performance since it eliminates the cost of parsing and translating JSON at run-time.
For our first public release, Lottie-Windows supports most AfterEffects features compared to other native libraries. We’re looking forward to your adoption and feedback to grow this library based on your requirements. Please do check out the project, documentation, and code samples, and feel free to reach out to us with any questions. We’re excited to join this incredible community and eager to see all the experiences you create with Lottie-Windows!
LottieFiles
by Nattu Adnan + Shafiu Hussain
LottieFiles is a community of Lottie animations built outside of Airbnb and growing faster than ever.
We have rebuilt the LottieFiles from ground up. With the new version, testing animations and managing your private animation has become much easier. Community animations have been downloaded over 1.1 million times and almost 1 million animations have been privately tested.
Stay tuned as we are rolling out advanced animation editing and many more exciting features to help designers and developers with their animation workflows.
Other Platforms
Since Lottie’s inception as a web player, it has continued to grow and support new platforms. Recently, unofficial renderers have been written for Skia, Qt as well as wrappers for React Native, Xamarin, and NativeScript. Between the official and unofficial renderers, you can use Lottie just about anywhere!
* LottieFiles is not officially affiliated with Airbnb.
