Lottie

Lottie is a JSON file that describes a vector animation, frame by frame, in a form any device can redraw live. Airbnb built it in 2017 and named it after Lotte Reiniger, the German silhouette animator working in the 1920s. A motion designer builds the sequence in After Effects, exports it through the Bodymovin plugin, and a small runtime like lottie-web, lottie-ios, or lottie-android parses that JSON and paints the vectors natively. It exists to kill a bad tradeoff: ship a heavy video or GIF that scales ugly, or hand-code every keyframe yourself.

A Lottie is not a video, and it is not a GIF. A GIF is raster and capped at 256 colors, so a three-second loading spinner can weigh 500KB to 2MB and still look crunchy on a retina screen. Lottie is vector math, so the same loop is often 10 to 50KB and stays razor sharp at whatever size you scale it to.

It is also not raw SVG animation, though people conflate the two constantly. SVG with CSS or SMIL handles a simple draw-on stroke fine, but the moment you need eased timing across a dozen layers, hand-authoring those keyframes turns into a maintenance nightmare. Lottie sidesteps that by letting the timeline come straight out of After Effects, where the motion designer already lives.

You have seen it everywhere. Duolingo's owl, Airbnb's own booking micro-interactions, and most app onboarding sequences run on Lottie. LottieFiles, the platform that launched in 2018, hosts hundreds of thousands of ready animations plus a preview and optimization pipeline, which is how most teams actually adopt it. The runtime family now stretches across lottie-react, Flutter, and React Native, so one After Effects export feeds web, iOS, and Android without a separate build for each.

The format kept moving. dotLottie arrived as a zipped .lottie wrapper that runs roughly 80% smaller than raw JSON, fixing the one legitimate size gripe. Around 2023 and 2024 the ecosystem leaned into faster renderers, including ThorVG-backed playback, to cut the main-thread cost that older versions were quietly paying. Interactivity showed up too, so a Lottie can now react to scroll position, hover, or a click instead of only looping on a fixed timeline.

Reach for Lottie on logo loaders, empty states, success checkmarks, onboarding flows, and any micro-animation that loops and has to stay crisp. The classic case is a brand mark that draws or assembles itself on page load in under a second, then settles into an idle loop. Nothing else gives you that filesize-to-quality ratio for vector motion.

Do not reach for it for photographic or 3D content, because that is still video's job and always will be. And be honest about runtime cost: lottie-web parses and paints on the main thread, so a busy animation stacked with masks and gradients can jank on a low-end Android phone worse than a well-compressed MP4 would.

The renderer choice is a real fork, not a detail. The SVG renderer is the crispest but the heaviest on the DOM, while the canvas renderer is faster but softens when it scales. Cap your layer count, avoid enormous masks, flatten what you can inside After Effects, and test on a cheap phone instead of your M-series laptop, because that laptop lies to you about performance.

Adding your first one is genuinely quick. Drop in lottie-web or the lottie-player web component, point it at your JSON, set loop and autoplay, then open the performance panel and watch the main thread before you ship, since even a 30KB file can quietly cost you frames.

Lottie is After Effects that ships as data, so your logo can dance without your bundle paying video prices for the privilege.