What is a Lottie file? The JSON animation format, explained
A Lottie file is a vector animation stored as JSON: shapes, paths, colors, and keyframes described as data instead of pixels. It was born as the export format of Bodymovin, an After Effects plugin, and became the de-facto standard for motion design on the web and in apps — because a few kilobytes of JSON can replace megabytes of video and stay razor-sharp at any size.
Where Lottie files come from
Most Lotties are exported from After Effects via the free Bodymovin extension — it walks your composition and writes every shape layer and keyframe into JSON. Newer design tools export it directly: Figma (via plugins), LottieLab, Jitter, and Rive (as a export target) all speak Lottie, and marketplaces like LottieFiles distribute hundreds of thousands of ready-made ones.
The format has a sibling: dotLottie (.lottie), a ZIP wrapper around the same JSON that can bundle several animations and their assets, typically 40–80% smaller. And Telegram's animated stickers (.tgs) are just gzipped Lottie JSON with tighter rules.
Why the format exists at all
Before Lottie, motion design shipped as video (heavy, blurry when scaled, no transparency in the common codecs) or as hand-coded CSS/JS animation (weeks of engineering per animation). Lottie keeps the designer's actual curves and shapes: the file is resolution-independent, tiny, and each property remains editable data — you can recolor or retime a Lottie programmatically at runtime.
That's why product teams love it for UI: onboarding animations, animated icons, loaders, and empty states can be swapped without an app release, driven by user interaction, and rendered pixel-perfect on every screen density.
Where it plays — and where it doesn't
A Lottie needs a runtime: lottie-web in browsers, Lottie iOS/Android in apps, dotlottie players, and frameworks' wrappers. Anywhere one of those is present, the JSON plays natively and stays tiny.
Everywhere else — email clients, Slack messages, PowerPoint decks, GitHub READMEs, most CMSs, video editors, digital signage — a .json animation is just a text file. Nothing renders it. That's the number-one confusion with the format: the file isn't broken, the destination just has no Lottie player.
Making a Lottie work where there's no runtime
The fix is conversion: render the animation once and save it in a format the destination understands. GIF for email and chat, MP4/WebM for social and video pipelines, APNG for full-color transparency, animated SVG for runtime-free vector motion on the web, PNG sequences for compositing.
That's exactly what this site does — entirely in your browser, so the file never uploads. Drop your .json, .lottie, or .tgs into the converter on the home page, or start from the format page that matches your destination.
