Snehanjan Shome

Design leader

Lottie files make micro interactions fun and easy, while Keeping the developers and designer from killing each other.

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

Here is the demo of how lottie files can be used to build micro interactions into an app.

other lottie files used in the voyager project. I love making them.

It wasn’t always this easy.

There was a time when you would have to create GIF sequences to build micro interactions. That really sucked. It was like animating in stop motion, where you would have to geneate a png sequence.

For this animation, like the one below at @60Hz, on a small portion of the app screen view.

This is a Json File whose size is 2KB.

we would have to create an image sequence of these many individual pngs. 120 to be precise.

This is a PNG File whose size is 725 KB. (Literally 363 times more)

The other disadvantages of using png sprite images.
1. Static images mean a fixed jittery animation.
2. Create the screens one-by-one.
3. Huge file size of individual assets that bloats up the app size.
4. loading the images take a little while.
5. The Colours and other design elements cannot be controlled via code.
6. Last but not the least, It was very difficult to make.

Overall the experience of making these sprite and for the end user would both suck. Luckily Lottie enables you to animate these vector images on After Effects, and thus making the control and conversion incredibly easy.