Lottie
A JSON-based animation format for rendering After Effects animations on web and mobile platforms.
What is Lottie?
Lottie is an open-source animation library and file format that enables After Effects animations to be rendered natively on web, iOS, Android, and other platforms. Developed by Airbnb and released in 2017, Lottie has revolutionised the way motion graphics are implemented in interactive contexts, replacing bulky video files and limited GIFs with lightweight, scalable, and interactive vector animations.
The Lottie workflow begins in After Effects, where designers create animations using standard tools and techniques. The Bodymovin plugin exports these animations as JSON files containing the complete animation data structure. Lottie libraries on various platforms then interpret this JSON and render the animation in real-time using native vector graphics capabilities.
The advantages of Lottie are substantial. File sizes are typically a fraction of equivalent video or GIF files. Animations scale to any size without quality loss because they are vector-based. Animations can be interactive, responding to user input or application state. And the same animation file works across multiple platforms.
Lottie has been widely adopted for micro-interactions, loading animations, onboarding sequences, and decorative elements in apps and websites. Its combination of design-tool familiarity and development-friendly output has made it a standard for motion graphics in interactive contexts.
How Does Lottie Work?
Lottie animations are defined entirely in JSON files that describe the animation structure, layers, shapes, transforms, and keyframes in a format Lottie libraries can interpret. Rather than storing pixel data like video, Lottie stores vector drawing instructions and animation parameters.
The Bodymovin plugin for After Effects analyses the composition and converts supported features into JSON structures. Layer hierarchies, shape paths, transform animations, and effects that have Lottie equivalents are translated precisely. Features without Lottie support are either approximated or omitted.
Lottie player libraries exist for web (lottie-web), iOS (lottie-ios), Android (lottie-android), React Native, and other platforms. These libraries read the JSON file and render frames using platform-native drawing capabilities, typically canvas or SVG on web, Core Graphics on iOS, and similar on Android.
Runtime features enable interactivity. Animations can be played, paused, reversed, or scrubbed to specific frames. Some implementations support dynamic content replacement, allowing text or images to be updated at runtime while maintaining animation behaviour.
Key Benefits and Importance
- Dramatically smaller file sizes compared to video or GIF alternatives
- Vector-based rendering that scales to any resolution without quality loss
- Cross-platform compatibility from a single source file
- Interactive capability responding to user input or application state
- Native rendering performance without video decoding overhead
- Familiar After Effects workflow for designers
Common Use Cases
- •Loading and progress indicators in apps and websites
- •Micro-interactions and UI feedback animations
- •Onboarding sequences and tutorial animations
- •Animated icons and buttons
- •Splash screens and transition animations
- •Decorative motion elements
Best Practices for Lottie
Review Lottie supported features documentation before designing
Structure layers and naming for clean export and potential interactivity
Use shape layers instead of images where possible for smaller files
Test performance on lower-powered target devices
Consider loading strategies for larger animations
Version control Lottie JSON files alongside source projects
Industry Applications
Mobile app development has widely adopted Lottie for polished micro-interactions. Major apps from companies like Uber, Airbnb, Google, and Microsoft use Lottie animations for loading states, celebrations, and UI feedback. The format has become standard for app animation.
Web development increasingly incorporates Lottie for animated illustrations, icons, and interactive elements. The ability to control animation through JavaScript enables sophisticated interactive experiences impossible with video.
Design systems and component libraries include Lottie animations as reusable assets. Animated icons, loading indicators, and status animations can be packaged as components that developers implement consistently across products.
Marketing and landing pages use Lottie for eye-catching animated illustrations that load quickly and perform smoothly. The format enables rich motion without the performance penalties of video embedding.
Technical Details
Lottie JSON files structure animation data hierarchically. Top-level properties define frame rate, duration, dimensions, and asset references. Layer arrays contain individual elements with their properties and keyframe data. Shape and transform data use numeric arrays for efficiency.
File size optimisation involves several techniques. Removing unused layers and reducing keyframe density decreases file size. Simplifying vector paths by reducing anchor points helps. Some tools post-process JSON to remove whitespace and shorten property names.
Performance considerations include shape complexity (simpler paths render faster), layer count (fewer layers improve performance), and certain features like masks and mattes that are computationally expensive. Testing on actual target devices reveals performance issues that may not appear in development environments.
Lottie's expression support is limited compared to After Effects' full expression capabilities. Simple expressions may export; complex expressions typically need conversion to keyframe animation before export.
Pro Tips and Common Mistakes
- →Use only Lottie-supported After Effects features to ensure export compatibility
- →Test animations on target platforms early in the design process
- →Optimise file size by removing unnecessary layers and keyframes
- →Consider interactivity possibilities when designing for Lottie
- ✗Using After Effects features that do not export to Lottie format
- ✗Creating overly complex animations that impact performance
- ✗Not testing on actual target devices before delivery
- ✗Ignoring Lottie file optimisation opportunities