A new rendering engine with significant performance improvements powered by Core Animation

By: Cal Stephens

Lottie is Airbnb’s cross-platform, open source library for rendering vector motion graphics. We use Lottie extensively at Airbnb, and it also powers animations in thousands of other apps throughout the industry.

Example Lottie animations included in Airbnb’s iOS app

Today we’re releasing Lottie 4.0for iOS. This major new release brings significant performance improvements to all Lottie animations, with a brand new rendering engine powered by Core Animation.

Using Lottie at scale for many years, we’ve learned a lot about its performance characteristics in real-world use cases. We found that it was relatively common for Lottie animations to drop frames in some of our more complex screens. To understand why, we first have to take a look at how Lottie previously rendered animations.

Previous versions of Lottie played animations on the app’s main thread, effectively using a CADisplayLink. Once per frame, Lottie would execute code on the main thread to advance the progress of the animation and re-render its content. This meant that animations would consume 5–20%+ of the CPU while playing, leaving fewer CPU cycles available for the rest of the app:

This also meant that animations would not update when the main thread was busy. This could cause animations to drop frames or freeze entirely, which results in a poor user experience:

These issues are inherent limitations of using a main-thread-bound rendering architecture.

On iOS, the most performant and power-efficient way to play animations is by using Core Animation. This system framework renders animations out-of-process with GPU hardware acceleration. Animation playback is managed by a separate system process called the “render server”. This means Core Animation-powered animations don’t contribute to the CPU utilization of the app process itself, and can continue even when its main thread is blocked or busy.

Throughout 2022, we’ve been working on a new rendering engine implementation for Lottie built on top of Core Animation. For each of the layers in the animation JSON file, the new engine builds a CALayer and applies CAAnimations with keyframes for the layer’s animated properties. Lottie passes these animation keyframes off to Core Animation, which takes care of actually rendering them on-screen and updating the animation each frame.

This new engine eliminates the CPU overhead from playing a Lottie animation, and effectively guarantees that Lottie animations will animate smoothly at 60 or 120 fps regardless of the app’s CPU load.

Since animations rendered by the new engine don’t execute any code on the app’s main thread, apps now have more resources available for other functionality. This is especially valuable when running tasks with high CPU load. As an example, the Airbnb app displays a Lottie animation when starting up for the first time. We ran an experiment here and found that switching to the new rendering engine reduces our app’s total launch time, while also improving the frame-rate and UX of the startup animation.

We first introduced the Core Animation rendering engine in Lottie 3.4.0 earlier this year, behind an opt-in feature flag. We’ve been using the new engine by default for all Lottie animations in the Airbnb app for over six months, and have been hard at work fixing issues reported by early-adopters in the community.

Starting in today’s Lottie 4.0 release for iOS, the Core Animation rendering engine is enabled by default for all apps using Lottie, with no additional work or migration required by app developers. This is a major milestone that we’ve been working towards for a long time, and we hope it helps raise the bar for animation quality and performance even higher throughout the industry!

Lottie 4.0 for iOS also includes several significant enhancements contributed by members of the community:

• Support for dotLottie animation files, which are much smaller in size than standard JSON files
• A new animation decoding implementation that is ~2x faster than the previous Codable-based implementation

You can learn more about Lottie, and our commitment to open source, in previous posts we’ve published:

• Introducing Lottie: Behind the scenes of our new open-source animation tool
• Moving Lottie Swiftly into the Future:A personal story on how Airbnb rewrote the popular open source library Lottie in a new language

Interested in working at Airbnb? Check out these open roles:

Staff Software Engineer, Wishlists

Staff Software Engineer, Guests & Hosts

Acknowledgments

Many thanks to Eric Horacek for first proposing this project and reviewing 100+ pull requests over the past year. Also thanks to Brandon Withrow, the original author of Lottie, plus the many other contributors who have helped out over the years.

All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.