What is Lottie
Lottie is a plugin for Adobe After Effects. it allows you to export After effects animations for web and mobile apps.
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.
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
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.