App Animations with Lottie by Airbnb

We have all heard of (or even used) Airbnb at some point – a giant that has dominated and revolutionized the travel industry for the past few years. So, it came as a pretty big surprise when last week, they released Lottie, an open-source tool that helps add animations to native apps. We decided to try our hands on Lottie by Airbnb and give you guys some quick impressions.

Lets start with the basics:

What is Lottie?

Lottie by Airbnb

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Why Lottie?

Lottie by Airbnb

Animations are awesome. It enhances the user experience of an app. Animations make your app “cool” but implementing them is really hard. Most of the time, developers use generic animations or are limiting its use due to technical difficulties. Using Gifs or videos are inefficient and heavy. Manually creating curves, and re-making animations on code is extremely time consuming and hard.

According to the engineers of Airbnb – that’s all about to change thanks to Lottie. After a year of in-house development and testing, Lottie will allow designers and developers to use animations, without having to fiddle with image files for countless screen sizes or thousands of hard to maintain code lines.

How to use Lottie?

Lottie only works if you use After Effects to create your animations. It is based on Hernan Toririsi – BodyMovin extension.

Step 1.

Download and install BodyMovin by Hernan Toririsi. There are quite a few methods to do this as listed on BodyMovin Github page but here is the easiest of them all.

a. Download the Zip file from the link

b. Extract content and get the .zxp file from ‘/build/extension

how to install Lottie by Airbnb
Run bodymovin.zxp

c. Download and Install ZXP installer from aescripts.com and run the extension file.

How to run Lottie by Airbnb
ZXP Installer
Step 2.

Now that your done setting up. Its time to run After Effects.

a. Open your AE project and select the bodymovin extension from Window > Extensions > bodymovin

bodymovin lottie Airbnb
Bodymovin Extension

b. A Panel will open with a Compositions tab. On the Compositions tab, click Refresh to get a list of all you project Comps. Select the composition you want to export. Select a Destination Folder and then click Render.

bodymovin Lottie Airbnb
Render with Bodymovin

c. Look for the exported json file in the Destination Folder

STEP 3.

After you finish rendering of animations, its time to load them up on your app. Depending on the platform of your choice, download the Lottie Library for iOS, Android or React Native and install based on the platform.

Since the animation is a JSON file they are quite small in size therefore reducing the load on your apps. The Animations can be played, resized, looped, sped up, slowed down, and even trigger based on interactions. 

 

All-in-All Lottie has been a welcome surprise by the folks at Airbnb. We are still tinkering with it but are pretty excited by the possiblites. For now it only supports solids, shape layers, trim paths, alpha mattes and masks in After Effects but updates are expected.

We really hope that this sets off a trend of animation tools from the big players. They are hard to write!

Design with Sketch App

We have always used Adobe Illustrator and Adobe Photoshop for the initial prototyping of our app designs. Though a bit of an overkill, we were familiar with it and hence stuck with it for a long time. Then a friend introduced us the Sketch App. And it just blew us away..

Sketch app

Firstly, it’s less than 50 MB installed on your hard disk. 50 freakin MB. Can you imagine that? Adobe Illustrator is more than 1.5 GB and Photoshop is well over that. We became a believer right then. Of course don’t get us wrong. Illustrator is still one of the best when it comes to making accurate drawings that involve stylus inputs and Photoshop is the king of digital image manipulation.

Sketch vs Illustrator vs Photoshop
Photoshop vs Illustrator vs Sketch

If you google you will find a million comparisons between Sketch, Photoshop and Illustrator but believe us Sketch wins when you are looking at getting started with the initial screens of the app and it wins in Web Design because of its superior grid layouts, ability to export all layers separately in one go and get CSS attributes for your designs!

Design with sketch app Pixel Drop Studios
iOS Ui Template in Sketch

And the templates included are so much handy. They have templates and export options for almost every iOS device screen size, Web Design and most popular Android ones. It is a match made in heaven for studios like us.

design with sketch app tutorial Pixel Drop Studios
Pre-Installed Templates in Sketch

So Sketch has now become our de facto software for building our initial designs.

It is available for download from their official website. You can first download a Trial version and then purchase the licence if you like from HERE.

If you are really interested here is a small list of awesome free tutorials that will help transition to the software. Note that some of the tutorials are of Sketch 3 while the latest version available right now is Sketch 4 but be assured that the learnings in them still apply!

For Readers:

Official Sketch User Manual

Marc Andrew – Sketch App Tutorial Series

Sketch Tutorial for iOS Developers – Robert Chan

Sketch for Beginners – Sebastian Gabriel

For the ones who prefer videos:

Sketch Tutorial Series – LevelUpTuts

Introduction to Sketch for Web Design – CharliMarieTV

Sketch for Beginners – Patrick Benske