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.
- 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).
- 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.