← Home 05 / 08 Motion · Tooling
Lottie animations
Tiny files, big interactions — and a quiet peace between designers and engineers.
Lottie lets you ship After Effects animations as JSON, rendered natively across iOS, Android, web, and Windows. It changed how we shipped motion on Voyager — and removed an entire category of arguments.
§ Role
Designer & animator
§ Year
2020
The old way
For years, micro-interactions shipped as PNG sprite sequences. They were fine, in the way that flip-books are fine. They were also:
- Static. Once exported, you couldn’t change a colour or a curve without re-rendering everything.
- Heavy. A single five-second animation could be a 700KB sequence of PNGs.
- Slow to load. Especially over patchy mobile networks.
- Painful to author. Every iteration meant another round-trip through After Effects and back into the build.
To make the point concrete: one of our animations was 2KB as a Lottie JSON, and 725KB as a PNG sequence. Same animation, 363 times smaller.
This is a JSON file. Its size is 2KB.
This is a PNG sequence of the same animation. 725KB. Literally 363 times more.
What Lottie actually does
You animate in After Effects. You export to JSON via Bodymovin. The Lottie runtime renders that JSON as vectors, natively, on whatever platform you point it at. Colours are tweakable from code. Speed is tweakable from code. Designers ship the animation; engineers ship a line of code.
Where I used it on Voyager
We built a small library of micro-interactions: loading states, empty states, the moment a session ends, the moment a streak ticks over. Each one tiny, each one consistent across iOS and Android, each one editable when we changed our minds.
What it changes, more broadly
The best thing Lottie does isn’t technical. It’s political. It lets designers ship motion without renegotiating it through engineering every time. That, for any cross-functional team, is a small miracle.
Full image archive
