airbnb/lottie-web

Lottie is a library that lets you run complex animations created by designers in Adobe After Effects directly inside a web page, Android app, iOS app, or React Native app, without needing to rebuild those animations in code. It solves the longstanding gap between what a designer can create and what an engineer can realistically implement by hand. The process works in two steps. First, a designer installs the Bodymovin plugin into Adobe After Effects and uses it to export their finished animation as a compact JSON file. Second, the developer loads that JSON file using Lottie's JavaScript library, which parses the file and plays it using either an SVG renderer, a canvas renderer, or an HTML renderer depending on the use case. The result is that the exact animation the designer built, with all its curves, fades, and motions, plays natively in the browser or app. Once an animation is loaded you can control it programmatically: play, pause, stop, change speed, play in reverse, jump to a specific frame, or loop a particular segment. Multiple animations can run independently on the same page. You would use Lottie when you want high-quality, designer-made animations such as loading spinners, onboarding illustrations, button feedback effects, or explainer animations that would take days to recreate in CSS or Canvas by hand. It is especially popular in apps where visual polish matters, like mobile onboarding flows or marketing landing pages. The tech stack for the web version is plain JavaScript with no required framework, distributed via npm as lottie-web. It runs in all modern browsers and supports multiple rendering backends. The designer-side tooling is the Bodymovin plugin for Adobe After Effects.