Lottie 4.0 for iOS released with Core Animation support

Lottie is Airbnb’s cross-platform open source library for rendering vector motion graphics . It is widely used within Airbnb itself, and it also supports animations in thousands of other apps.

Lottie 4.0 for iOS was released yesterday. This major new release brings significant performance improvements to all animations with an all-new rendering engine powered by Core Animation.

Previous versions of Lottie played animations on the main thread of the application, effectively using CADisplayLink. Once per frame, Lottie ran code on the main thread to advance the animation and re-render its content. This meant that the animation was consuming 5 to 20%+ CPU during playback, leaving fewer CPU cycles available for the rest of the application.

This also meant that the animations weren’t updated when the main thread was busy. This could cause the animation to skip frames or freeze completely, resulting in a poor user experience.

On iOS, the most performant and efficient way to play animation is to use Core Animation. This system framework renders out-of-process animations with GPU hardware acceleration. Animation playback is controlled by a separate system process called the “render server”. This means that animations based on Core Animation do not affect the application process’s CPU usage and can continue even when its main thread is blocked or busy.

Throughout 2022, Airbnb has 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 creates a CALayer and applies keyframed CAAnimations to the layer’s animated properties. Lottie passes these animation keyframes to Core Animation, which takes care of actually displaying them on the screen and updating the animation every frame.

This new engine removes the CPU load when playing Lottie animations and virtually guarantees smooth Lottie animations at 60 or 120 frames per second regardless of the application’s CPU usage.

Since the animation rendered by the new engine does not execute any code on the application’s main thread, applications now have more resources available for other functions. This is especially valuable when performing tasks with high CPU usage. For example, the Airbnb app displays a Lottie animation on first launch. In the experiment, we found that switching to a new rendering engine reduces the overall application launch time, as well as improves the frame rate and UX of the launch animation.

Starting with today’s release of Lottie 4.0 for iOS, the Core Animation rendering engine is enabled by default in all apps that use Lottie, with no additional work or migration required for app developers. This is an important milestone that the company has been working on for a long time, and the developers hope it will help raise the bar for animation quality and performance even higher.

Lottie 4.0 for iOS also includes several significant improvements made 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 the new version in the blog post .