How Lottie Animations Work: From After Effects to the Web

The problem Lottie solves

Motion design on the web has historically been a painful compromise. GIFs are large, pixelated at non-native sizes, and limited to 256 colours. CSS animations handle basic transitions but cannot replicate complex After Effects work. Video files are too heavy for UI animations and do not support transparency. For years, motion designers had to either simplify their work dramatically for web delivery or accept that animations would look significantly worse than the original.

Lottie changed this. Released by Airbnb in 2017, Lottie exports After Effects animations as JSON files and plays them back in browsers, iOS, and Android at full vector quality, at any size, with tiny file sizes. A loading animation that might be 800KB as a GIF is typically 15–40KB as a Lottie JSON file.

How Lottie JSON works

When you export an After Effects composition using the Bodymovin plugin, it analyses every layer, keyframe, easing curve, shape property, and transform in the composition and encodes it all as a JSON object. The result is not a video — it is a description of the animation: at time 0.5 seconds, move this layer from position A to position B with a specific easing curve.

The Lottie rendering engine (lottie-web for browsers) reads this description and draws the animation frame by frame using Canvas or SVG. Since shapes are described mathematically, the animation scales to any size without pixelation.

Supported After Effects features

Lottie supports a substantial but not complete subset of After Effects. What works well: shape layers, solid layers, masks, track mattes, blending modes, time remapping, and most transform properties. What does not export well: some complex effects plugins, 3D layers, advanced particle systems, and certain expressions. The general rule is that vector-focused animations export reliably; effects-heavy compositions may need simplification.

The lottie-web library

Integration in a browser is straightforward:

import lottie from 'lottie-web';
const animation = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/loading.json'
});

SVG renderer produces the sharpest results at any size. Canvas renderer is better for complex animations with many layers. HTML renderer supports more After Effects features but has worse performance.

Programmatic control

Lottie becomes very powerful with JavaScript control: animation.play(), animation.pause(), animation.setSpeed(0.5), animation.goToAndStop(30, true) to jump to a specific frame. Event listeners for completion, looping, and entering specific frames enable interactive animations that respond to user input. Colour customisation through layer targeting allows a single animation file to work across multiple colour themes.

Testing with my Lottie player

My Lottie player lets you preview and inspect Lottie JSON files with no installation: control playback speed, scrub through frames, check how the animation looks at different sizes. I use it to catch export issues — missing layers, broken masks — before integrating an animation into a project.