# Overview
Lottie is a lightweight, JSON-based animation format used to deliver high-quality motion across web, desktop, and mobile applications. It gives designers and developers a practical way to ship animations that are smaller than video or animated image formats such as GIF and APNG, while preserving the benefits of vector-based, resolution-independent rendering.
As Lottie adoption has grown, production teams have needed a more standardized way to package, deliver, and manage animations across platforms. dotLottie addresses this need as the standard format for production-ready Lottie animations.
A dotLottie file extends Lottie by bundling animations, assets, metadata, themes, state machines, and other capabilities into a single portable file. This makes dotLottie better suited for scalable product workflows, design systems, interactive motion, and cross-platform delivery. Rather than treating animations as isolated JSON files, dotLottie provides a consistent foundation for shipping motion across products and applications.
LottieFiles is the largest platform for discovering, creating, previewing, testing, and sharing Lottie animations. Designers and developers can create and export Lottie and dotLottie animations using tools such as Lottie Creator, the LottieFiles for After Effects plugin, and the LottieFiles for Figma plugin.
# Background
Lottie originated from the Bodymovin plugin for Adobe After Effects, created by Hernan Torrisi, which made it possible to export After Effects animations into a JSON structure that could be rendered outside of After Effects. Airbnb later introduced Lottie players for iOS and Android, helping establish the format as a practical way to bring animation into production applications.
Since then, Lottie has grown from an export format into a broader motion ecosystem with creation tools, plugins, runtimes, testing utilities, and platform support. dotLottie builds on that ecosystem by standardizing how Lottie animations and their related assets are packaged for production use.
# Why dotLottie?
Lottie already provides several advantages as an animation format: small file sizes, high-quality rendering, support for vector and raster assets, multi-platform playback, and runtime control over animation properties.
dotLottie builds on these strengths by adding a standardized package format with features designed for production workflows.
# Compression
A Lottie animation can reference image assets in several ways:
External files: Assets are stored separately and referenced by relative path.
Inline Data URIs: Assets are embedded directly in the JSON using Base64 encoding, which can significantly increase file size.
Remote URLs: Assets are hosted separately and loaded at runtime.
dotLottie packages the animation and its required assets into a compressed archive. This keeps related files together, reduces total file size, and avoids the overhead of inlining assets as Data URIs. Smaller files can reduce bandwidth usage, improve delivery performance, and lower distribution costs.
# Multiple animations
A dotLottie file can contain multiple animations in a single package. This is useful for related animation sets, component states, icon systems, and interactive experiences where several animations need to be shipped together.
Animations can be selected and loaded by the player as needed, helping avoid unnecessary runtime overhead.
# Theming and motion tokens
dotLottie supports themes and motion tokens, allowing animations to be customized without duplicating animation files. Teams can define tokens for properties such as colors, stroke widths, gradients, and other supported Lottie properties, then override those values at runtime.
This makes it easier to adapt animations across brands, themes, states, and design systems while keeping files lightweight and maintainable.
# Interactivity
dotLottie can include state machine definitions for interactive animation behavior. State machines allow animations to respond to user input, application events, and runtime conditions.
When used with multi-animation dotLottie files, state machines can also coordinate transitions between animations, making it possible to build richer interactive motion experiences within a single portable package.