The name Lottie comes from the open-source player libraries Airbnb released in 2017 for iOS, Android and React Native. They read the JSON that the Bodymovin After Effects plugin exports. Today the format is used far beyond Airbnb, and LottieFiles runs the biggest library of free animations and tools around it.
How a Lottie file works
Open a Lottie JSON file and you will see the composition size (w, h), the frame rate (fr), the first and last frame (ip, op) and a list of layers. Each layer holds shapes, fills, strokes and transforms, and each animated property holds keyframes with easing. The player reads this once, then on every frame works out where each shape should be and draws it to SVG or a canvas.
That is why Lottie is small and sharp. A GIF stores every frame as pixels. A Lottie file stores the instructions to draw the frames, so a 3 second loader can be a few kilobytes and look crisp on a retina screen.
Where Lottie works well and where it does not
Lottie is a good fit for loaders, empty states, success checks, onboarding illustrations and icon animations: motion that plays from start to end. It struggles with animation that has to react to the user in many ways, because the file is one timeline. You can jump to frames or play segments from code, and dotLottie now supports state machines, but complex interactive UI is easier in tools built around states from the start.
Rendering cost is the other limit. Large files with many layers, masks or embedded images can drop frames on low-end phones. Keep shape counts low and avoid raster images inside the file.
Lottie, dotLottie and interactive formats
dotLottie (.lottie) is a zip that can hold one or more Lottie animations plus images, themes and state machines. Rive (.riv) and ExodeUI (.exode JSON) are different formats designed around state machines and inputs from the start. We make ExodeUI. If your animation only needs to play, Lottie is the most widely supported choice.