What is Lottie? The Complete Guide to Lottie Animations

7 min read

Lottie is an open-source animation file format that renders After Effects animations in real-time on web, iOS, Android, and other platforms. Originally created by Airbnb in 2017, Lottie has become one of the most widely adopted animation formats in the industry, used by thousands of apps and websites around the world.

What is Lottie?

Lottie is named after the German film director Charlotte "Lotte" Reiniger, a pioneer of silhouette animation. The format takes Adobe After Effects animations — exported via the free Bodymovin plugin — and converts them into a JSON file that can be rendered natively at any size, on any platform, without quality loss.

Because Lottie files are plain JSON, they are human-readable, easy to inspect, and can be modified programmatically. This openness has contributed to Lottie's wide adoption and a large ecosystem of tools and libraries.

The format is now maintained by the LottieFiles platform, which hosts a marketplace of Lottie animations and provides tooling for editing and optimizing files.

How Lottie Works

The Lottie workflow has three stages:

1. Design in After Effects — animators create motion graphics in Adobe After Effects using standard features like shapes, paths, masks, and effects.
2. Export with Bodymovin — the free, open-source Bodymovin plugin for After Effects converts the composition to a JSON file that captures every keyframe, easing curve, and layer property.
3. Render with a Lottie runtime — platform-specific libraries (lottie-web, Lottie-iOS, Lottie-Android) parse the JSON and render the animation using SVG, Canvas, or native drawing APIs.

This workflow means the entire After Effects animation toolchain — including expressions, effects, and shape layers — is available to your motion designer, and the result plays back identically across platforms.

Key Features of Lottie

Cross-Platform by Design

Lottie has mature, well-maintained runtimes for every major platform. A single .json animation file can be shipped to web, iOS, Android, and React Native with the same visual result. This makes Lottie particularly attractive for product teams building across multiple platforms who want consistent motion branding.

Designer-Friendly Workflow

Because Lottie is built on After Effects, designers can use a tool they already know. There is no need to learn a new animation editor — the existing AE workflow applies, and the Bodymovin export is straightforward. This dramatically reduces the friction between design and engineering compared to formats that require specialized tools.

Wide Ecosystem Support

The Lottie ecosystem includes editors on LottieFiles.com, Figma plugins, an official dotLottie format (.lottie) with improved compression, and integrations with tools like Webflow, Framer, and Canva. The format's popularity means most developers have encountered it and most design tools have some level of Lottie support.

Platform Support

Lottie's official and community runtimes cover:

• Web — lottie-web renders via SVG (default), Canvas 2D, or HTML. It is the most feature-complete runtime and supports all After Effects features that Bodymovin can export.
• iOS (Lottie-iOS) — Airbnb's Swift library, now maintained by the community. Renders via Core Animation and supports the vast majority of Lottie features. Available via CocoaPods, Carthage, or Swift Package Manager.
• Android (Lottie-Android) — The original Android library from Airbnb. Renders using Android's Canvas API and is available via Maven. Widely used in production Android apps.
• React Native — lottie-react-native wraps the native iOS and Android libraries, providing a consistent API for cross-platform React Native applications.
• Flutter, Xamarin, Windows — community-maintained runtimes cover additional platforms, though with varying levels of feature parity.

File Size Considerations

Lottie files are JSON text, which has implications for file size. Simple icon animations typically range from 5–50KB, but complex animations with many layers, effects, or long durations can grow to several hundred kilobytes or more.

Several techniques can reduce Lottie file sizes:

• Use the dotLottie (.lottie) format, which applies DEFLATE compression and typically reduces file sizes by 40–70%
• Optimize JSON with tools like lottie-optimizer before shipping
• Avoid rasterized layers and effects that embed base64-encoded image data
• Simplify paths and reduce the number of keyframes where possible

For icon-sized animations, Lottie files are generally reasonable in size. For complex full-screen animations, careful optimization is important.

Performance Characteristics

Lottie-web defaults to SVG rendering, which has the advantage of being resolution-independent and accessible, but can be slow for animations with many simultaneously animated elements. Switching to Canvas 2D rendering improves performance significantly for complex animations.

For simple icon animations — which are the primary use case on Unicorn Icons — Lottie performance is excellent on all modern devices and browsers. The runtime is approximately 60KB gzipped for lottie-web.

Use Cases for Lottie

• App onboarding — animated illustrations that explain features during first-run flows
• Loading spinners — branded loading animations that match your visual identity
• Icon animations — animated versions of interface icons for tab bars, buttons, and toolbars
• Empty states — engaging animations for empty lists, errors, or success confirmations
• Marketing animations — hero section animations and feature illustrations on marketing sites

Getting Started with Lottie

To use Lottie animations from Unicorn Icons in your project:

1. Browse and download .json or .lottie files from Unicorn Icons
2. Optionally customize colors in the Unicorn Icons editor
3. Follow the React + Lottie integration guide to add icons to your app

Frequently Asked Questions