Published on | Prototyping: From UX to Front End — Medium Bi Yoo

Quick review on Airbnb’s AE animation renderer

Few months ago, I discovered this library called Lottie and have been meaning to try it out. I finally got some down time to play with it, so I’m going to write about it!

Lottie is an open-source library that renders After Effects animations that are exported as JSON with bodymovin. (Bodymovin is an AE plugin that exports AE animations for web)

Long story short, I think if you care about performance and small file sizes, Lottie is a pretty awesome tool you can use. I was able to create this short AE animation which is about 5 seconds, in a 20KB JSON file. Considering mp4 version of this was about 3MB, the size difference is pretty significant.

* you can control not just start and stop, but also speed & keyframeiOS version — I think this library works better with iOS.

For simple animations, I would still use FB’s Animated library if you are writing in React-native. But if you are proficient in After Effect, Lottie can be a real game changer. It could definitely help you achieve better UX and polished UI for your app.

AE JSON files that are converted by bodymovin plugin are not just for native apps, you can use them for web as well. IMO, lottie-web has better APIs and controls. There’s some impressive examples on codepen if you want to explore.

airbnb/lottie-web

Also, there were few things I noticed when I was playing with it. I wouldn’t call them a drawback, but I think it is worth noting.

As the time of writing,

After Effect expressions are not exported correctly.
Puppet pin is not supported.
Expo implementation of Lottie is still Alpha. Speed props did not work for Android (works for iOS).

I created Expo snack for those who want to try this out. This has speed control buttons using speed prop.

As always, I hope this short review was helpful to your project.

Happy holidays!

Using Lottie with React Native was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Lottie with React Native

Cool stuff, every week

More Articles