Vector animations exported from After Effects, played natively on web, iOS and Android
Lottie is how most product teams ship the small animations users notice (a loading spinner, a success tick, an onboarding illustration) without GIFs or video: a designer exports JSON from After Effects, a developer drops it in with one line, and it scales to any screen at a few kilobytes. The player libraries are free and open source. LottieFiles, the company that runs the asset library and editor, charges from $19.99 per user a month for its tools; you only need that if you want its library, editor or hosting.
Are we wrong about your product? Tell us.
Lottie is a JSON-based animation format and a set of players. Animations are made in After Effects (or in LottieFiles' editor), exported with the Bodymovin plugin, and rendered by lottie-web in browsers, lottie-ios and lottie-android natively, and dotLottie players that bundle assets into one small file. The original lottie-web player is maintained by Airbnb under the MIT licence with more than 32,000 stars on GitHub.
LottieFiles is the commercial company around the format. It runs the largest library of free and premium animations, a browser editor to recolour and trim them, a plugin ecosystem for Figma and Canva, and hosting with a CDN. Its Free plan is enough to find an animation and download the JSON; the paid plans are for designers who make and manage many.
Quick facts: lottie-web: MIT licence, Airbnb · Players for web, iOS, Android, React Native, Flutter · dotLottie bundles animation and assets · LottieFiles library, editor, Figma plugin.
A Lottie JSON is usually a few kilobytes against hundreds for a GIF, and stays crisp at any resolution.
lottie-ios, lottie-android, React Native and Flutter players render on the GPU without a WebView.
Play, pause, reverse, seek by frame or scroll position, and change colours from code.
One compressed .lottie file carries the animation and its images, with a web component to play it.
Recolour, trim and resize animations in the browser; search a library of free and premium assets.
Preview and insert animations in design files so prototypes move the way the product will.
The format and the players are free. LottieFiles charges per user for its library, editor, storage and CDN; Team+ and Enterprise are by quote.
| Plan | Price | What you get |
|---|---|---|
| Lottie players (open source) | $0 | lottie-web (MIT), lottie-ios, lottie-android, dotLottie players; no limits |
| LottieFiles Free | $0 | Free library, basic edits, unlimited preview, testing and sharing |
| LottieFiles Individual | $19.99 per user / month, billed annually | Unlimited uploads, 1 editor, 2 GB storage, 10 GB CDN, premium library, version history, 300 AI credits a month |
| LottieFiles Team | $24.99 per user / month, billed annually | 2+ editors, unlimited viewers, 5 GB storage, 50 GB CDN, roles and permissions, 600 AI credits a month |
| Team+ and Enterprise | By quote | 5 to 25+ editors, 50 GB+ storage, 500 GB+ CDN, motion templates, SSO, audit logs, API |
Source: lottiefiles.com/pricing, checked 22 Oct 2026. LottieFiles prices in US dollars, billed annually. Player licence confirmed on github.com/airbnb/lottie-web (MIT).
In the order a small team would do them.
lottie-web or the dotLottie web component for the browser, lottie-ios and lottie-android natively; avoid WebViews for animation.
No unsupported effects, expressions converted, images embedded or exported as assets; test the JSON in the LottieFiles previewer before handoff.
Bundle JSON or .lottie files in the build so first paint does not wait on a network call.
Keep each animation under 100 KB and watch the number of layers; profile on a low-end Android device.
Check prefers-reduced-motion (web) and the OS setting (mobile) and show a static frame instead.
If Lottie is not the right fit, these are the pages to read next.
The design tool most Indian teams already use; the Lottie plugin previews animations inside it.
Choose when: You want animations previewed in the same file as the UIQuick marketing visuals and simple animated exports for non-designers.
Choose when: The animation is for a social post, not inside the productOne actionable growth breakdown every morning, across 12 industries — with an audio version in English and 10 Indian languages. No fluff, just hard product teardowns and India benchmarks.