After Effects to Code with Lottie

Tan Chan
2 min readJul 21, 2020

Imagine there’s a way you could toast bread without firing up the stove, flipping the bread in a pan, and burning your fingers along the way. Lottie is the equivalent of this tool.

Once in a while, a tool like Lottie comes along that changes the game. I hear often that tools are simply tools. They will evolve, they will vanish. What matters is what you’ll build with those tools. I agree.

But when someone spends time and energy to craft a tool, and when thousands of people say that the tool is making their lives a whole Lottie easier, I want to explore it myself.

Lottie helps you convert high-quality animations from After Effects to web sites without coding. Designers and developers at Airbnb created it in 2017. The School of Motion interviewed them about the process.

Lottie is revolutionary. It allows developers to implement animations in websites and mobile apps without manually coding them. Now, Lottie is the standard for bespoke web animation. It’s a beacon of a no-code world.

Here is an example of a Lottie animation:

A simple Lottie animation.

Lottiefiles.com showcases animations that folks around the world have created with Lottie. There, you can find sophisticated animations that would look low quality if they were implemented as GIFs.

There are still After Effects features that Lottie doesn’t support, like certain layer effects, mask effects, and merge paths properties. And these limitations are specific to the operating system. I don’t see these as limitations. It’s useful to have a tool with constraints. In the early stages of a product, you want people to simply try it. To include as many features as possible is not only realistic, but also wasteful. You waste the chance for people to give their own feedback. You miss hearing about what features might make them work even better.

My gratitude goes to the creative folks who woke up one day and asked, “Hmm, can I toast this bread in a better way?” And after much tinkering, created Lottie.

--

--

Tan Chan

Observations on living and working 🔅 Senior UX Motion Designer at Vista // bytanchan.com