Menu
the REFERENCE

The user-friendly animation framework named Lottie

We all like our apps to contain fluid, beautiful and fun animations. It seems a simple thing, but it’s one that can make the difference between an app that’s just OK and one that really stands out. Unfortunately, implementing good animations isn’t always that easy. The process of creation and integration is often a multidisciplinary endeavour. Fitting animation usage must be located, the animations themselves must be created and finally they also need to be implemented in your app. On top of that, if your application is multi-platform, things get even more complicated because iOS, Android and web all use different APIs for working with animations. All of this makes integrating solid animations in your app a difficult challenge. It can sometimes make for messy code, and getting an animation just right can feel like a real nightmare.

Airbnb Lottie

Lucky for us, AirBnb came up with Lottie! Lottie is an animation framework that is capable of rendering animations exported as JSON from Adobe After Effects. The framework offers native support for cross-platform mobile (and React Native) as well as for web via a Javascript framework. Do you think that sounds too good to be true?

Rest assured, it sure isn't. Developers simply embed the exported JSON files as a JSON resource in their project and use Lottie to load and play the animations wherever they see it. There are native animation view components for both iOS and Android platforms. Wherever you can use, insert or append a view in your application, you can display a Lottie animation. That means you can use animations as part of an on-boarding image, a view background but also on a button, in table cells, etc. On iOS it's also possible to perform native view controller transitions via Lottie.

Realtime rendering

That’s already pretty impressive, right? But things get even better. Because Lottie animations are rendered in realtime, you’re not limited to just playing the animations as they are, you can also exercise tons of control over them. This includes (but is not limited to) realtime interaction with the playback speed, start/stop position, reverse playback and scrubbing. It's also possible to change animations at runtime via the Dynamic Properties API. This requires the designer to set up the right layers and properties in Adobe After Effects. These layer properties can then be accessed and edited via key paths. Examples of such editable animation properties are the layer's X, Y positions, scale, opacity, colour and much more. Note that before you start, it may be a good idea to check the supported After Effects features on airbnb.io/lottie/supported-features.html.

The Dynamic Properties API is really interesting, because not only do you get to watch the animation, you (as the developer) and your users get to interact with it as you see it. A few examples of interactive animations are:

  • Animated button states
    Imagine having an “add to basket” button. This button displays a “+” icon by default. When the user taps the button, the “+” icon animates into a spinner indicating the item being added to the basket. When the "add to basket" web service request has completed the spinner morphs into a checkbox, assuring the user that his item was successfully added. This can all be done with a single animation by making good use of keyframes and scrubbing.

  • Parallax backgrounds
    For example, an animation can span multiple onboarding screens, whereby the animation progresses back and forth as the user swipes through the topics presented.

Airbnb Lottie

And your designers? All they need to do is install the free BodyMovin plugin in Adobe After Effects, export their work to the required JSON files and throw them over to the developers. Well, that, and create those gorgeous animations of course.

Lottie certainly made our lives easier. If you’re interested, check out the Community showcase on Community Showcase · Lottie to get an idea of the animations you can incorporate into your own apps.

Get more tech news and updates from The Reference delivered to your inbox by signing up for our monthly newsletter.

SIGN UP TO OUR MONTHLY NEWSLETTER

Don't miss out

top
It's more than digital, it's your business
The Reference is nothing without its customers. Carglass is the car window repair and replacement specialist for whom we've built a fully responsive Sitecore website. Read more about this client.