lottieditorLottieditor guides
What is a Lottie file?
A Lottie file is an animation saved as JSON. It describes shapes, colors, and keyframes instead of pixels, so a player draws each frame at whatever size it is shown. Apps and websites use Lottie for loaders, icons, and small illustrations.
How a Lottie file works
A Lottie player reads the JSON and draws the animation as it plays, using SVG, canvas, or native drawing code. The file lists the canvas size, the frame rate, and a stack of layers. Each layer holds vector shapes and keyframes for properties such as position, scale, rotation, opacity, and color. The player fills in the frames between keyframes, so the animation stays sharp on any screen, and the file stays small when the artwork is simple.
A complete Lottie file
This file moves a purple dot across a 200 by 200 canvas and back in two seconds. fr is the frame rate, ip and op are the frames where playback starts and ends, w and h are the canvas size, and each entry in layers has its transform keyframes in ks and its artwork in shapes.
{
"v": "5.12.2",
"fr": 30,
"ip": 0,
"op": 60,
"w": 200,
"h": 200,
"nm": "Moving dot",
"layers": [
{
"ty": 4,
"nm": "Dot",
"ip": 0,
"op": 60,
"st": 0,
"ks": {
"o": { "a": 0, "k": 100 },
"r": { "a": 0, "k": 0 },
"a": { "a": 0, "k": [0, 0] },
"s": { "a": 0, "k": [100, 100] },
"p": {
"a": 1,
"k": [
{ "t": 0, "s": [50, 100], "o": { "x": 0.4, "y": 0 }, "i": { "x": 0.6, "y": 1 } },
{ "t": 30, "s": [150, 100], "o": { "x": 0.4, "y": 0 }, "i": { "x": 0.6, "y": 1 } },
{ "t": 60, "s": [50, 100] }
]
}
},
"shapes": [
{ "ty": "el", "p": { "a": 0, "k": [0, 0] }, "s": { "a": 0, "k": [40, 40] } },
{ "ty": "fl", "c": { "a": 0, "k": [0.5, 0.34, 0.81, 1] }, "o": { "a": 0, "k": 100 } }
]
}
]
}
Download this file and open it in the Lottie viewer to watch it play.
Where Lottie came from: Bodymovin
Hernan Torrisi created the format in 2015 as the export format of Bodymovin, an After Effects extension that saves compositions as JSON, together with a web player. Airbnb then released Lottie players for iOS and Android built on the same files, and the format took the Lottie name, after the animator Lotte Reiniger. Bodymovin remains a common way to export Lottie from After Effects.
The format is openly documented. The Lottie Animation Community publishes a formal specification, and the main players are open source.
Lottie JSON and dotLottie
A .json Lottie file holds one animation. A dotLottie file (.lottie) is a compressed ZIP archive that packages one or more animations with a manifest and their images, so it is usually smaller than the JSON inside it. The player you use needs dotLottie support to open it.
Lottie compared with GIF and video
| Question | Lottie | GIF | MP4 or WebM video |
|---|---|---|---|
| What is stored | Vector shapes and keyframes; images can be embedded | Raster frames with up to 256 colors each | Compressed raster frames |
| Resizing | Stays sharp at any size | Blurs or pixelates when enlarged | Blurs when enlarged |
| Transparency | Full alpha | Each pixel is either visible or transparent | None in MP4; WebM alpha depends on the browser |
| Control from code | Play, pause, seek, speed, and segments | None | Play, pause, seek, and speed |
| What it needs | A Lottie player library | Works anywhere images work | A video element or player |
Lottie fits interface motion and illustrations made of shapes. GIF fits email, chat, and places that cannot run a player. Video fits footage and effects-heavy motion. Animated SVG or CSS works well for a few simple property changes written by hand; Lottie suits animation made in a design tool that should play the same way on the web, iOS, and Android.
Convert Lottie to GIF, convert Lottie to video, or convert a GIF to Lottie.
Limitations
Players do not all support the same features. After Effects expressions, some effects, and 3D layers can render differently or not at all, so test the file in the player your app uses. Files with many layers can be slower to play than a short video. Photos or GIF frames embedded in a Lottie remain raster images, and they remove most of the size advantage.
How to open a Lottie file
Drop the file into the Lottie viewer to play it, step through frames, and check the loop. It accepts JSON and dotLottie and runs in your browser. To show the animation on a website, load it with a player such as lottie-web. The React tutorial and plain HTML tutorial include working examples.
How to make a Lottie animation
In After Effects, animate shape layers and export with Bodymovin or another Lottie exporter. In a browser editor such as Lottieditor, draw shapes or import SVG artwork, set keyframes, and export JSON or dotLottie directly.