Animations from Adobe After Effects to the web using Lottie

I have experimented with Lottie to convert animations build using After Effects to web format. In this post, I explain the workflow, my experience with exporting After Effects animation to web using Lottie.

What is Lottie

Lottie is a plugin for Adobe After Effects. it allows you to export After effects animations for web and mobile apps.

Why Lottie

Coding animations built with animations software can be very tough. There are lots of details in the Animations. The timing functions, the relation of objects to each other and a lot of other details. After a designer colleague of mine told me about Lottie, I want to try it as soon as possible.

Lottie installation

Installing Lottie is pretty straightforward. I used the zxp installer which is the recommended method and it worked.

The After Effects animation

I created this basic text animation using one of After Effects presets.

Converting to web

Same as installation, exporting animation is also pretty simple. You get a big data.json file which contains necessary information for Lottie player. In my case, the data.json file was 23kb.

Using the data.json file

You load the Lottie player JavaScript file. The file is 526 KB not minified and not gzipped. After gzipping and minifying it is ~57 KB. And here is the output animation.

ERROR: Content Element with uid "244" and type "html" has no rendering definition!

The conclusion

Lottie makes exporting animations pretty easy, you get an SVG file which you can style.

There are two disadvantages to using Lottie.

  1. Your bundle size will increase. alone the player is ~520KB (~57KB gzipped and minified). The data file for a simple text animation was ~22KB (~6KB gzipped and minified).
  2. In my experience the exported animation was not exactly the same as the After Effects animation, Lots of details were lost.

So use it with care, when you design a landing page with really complex animations it can make your job really easy.