Native app animations in Xcode using Sketch, After Effects and Lottie from Airbnb.

Animated icons and illustrations in native app on-boarding screens are becoming more popular. They visually delight the user and also help make the experience more intuitive.

Mmmmmmm, native app animations.

Creating them however, can be troublesome and the two questions that keep coming back to are:

• What do you use to author the asset?
• What format does an iOS or Android developer need?

I’ve tried a few combinations and will take you through my workflow.

This tutorial requires the following software:

• Sketch
• After Effects
• Lottie from Airbnb
• Xcode

We’ll set up Lottie inside After Effects and Xcode, create and export vector assets from Sketch, animate and export them with After Effects and Bodymovin before creating the Xcode project and building a working prototype.

Here’s what we’ll be making:

Looping and on-boarding animations running inside the Xcode Simulator.

01. Setup Lottie

Getting everything working is a good place to start.

First up, go to the Lottie site:

Lottie

Scroll down and follow the links to Bodymovin (the extension you install in After Effects) and the iOS Integration page (that shows you how to setup the Lottie library in Xcode).

Install Bodymovin

The best way to install the extension is on the Bodymovin GitHub page:

GitHub - bodymovin/bodymovin: after effects to html library

• Download the ZIP from the repo
• Extract content and get the .zxp file from ‘/build/extension’
• Use the ZXP installer from aescripts.com.

Once you’ve downloaded these, you can bring the extension over to your desktop, you can find it here:

bodymovin-master/build/extension/bodymovin.zxp

Open “ZXP Installer.app” and drag the the extension into it.

Installing the Bodymovin’ extension.

Open After Effects and make sure the extension has been installed. You should see this:

Select Bodymovin and if everything went well you’ll see the Bodymovin window. We’ll come back to this later in the tutorial as we get ready to export our animation.

In the menu, go to:

After Effects CC/Preferences/General

Make sure “Allow scripts to Write Files and Access Network” is checked.

Install Lottie in Xcode

Visit the Lottie iOS GitHub repo here:

GitHub — airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

You’ll notice in the “Setup Lottie” section that the first thing you have to run is a Terminal command. I tried this and nothing happened and here’s why: Lottie requires “CocoaPods”, a dependency manager for Swift and Objective-C Cocoa projects.

Setup CocoaPods

To make sure you have it installed, run Terminal and enter this command:

pod --version

If you get an error, you’ll have to install CocoaPods on your system, you can do this by opening Terminal and entering this command:

sudo gem install cocoapods

Next, you need to setup the CocoaPods master repo by running this command in Terminal:

pod setup

When everything installs we can move onto Xcode. If you get an error you can follow some of the solutions provided in the CocoaPods troubleshooting guide:

CocoaPods Guides

We’ll park CocoaPods for now and move onto Xcode.

Create an Xcode Project

Open Xcode and create a new “iOS/Single View” project:

We’ve saved ours on the desktop in this folder structure (you can save yours where ever you like):

Mobiddiction Lottie Tutorial/Xcode/MobiddictionLottieTutorial/MobiddictionLottieTutorial.xcodeproj

Install Pod File

Close this project and install it’s pod file opening Terminal, changing the directory to the Xcode projects directory by running this command (change the path to your path in this instance):

cd /Users/yourusername/Desktop/Mobiddiction\ Lottie\ Tutorial/Xcode/MobiddictionLottieTutorial

Then run this command:

pod init

This create a pod file in the same directory as your Xcode project. Open it with your favourite text editor and enter:

pod ‘lottie-ios’

Your file should look like this:

Save this file, go back to Terminal and enter this command:

pod install

Again, if you don’t receive any errors you are now ready to start using Lottie inside Xcode.

Here’s what we’ll be doing next:

• Create an After Effects animation with vectors created in Sketch
• Bodymovin to export into a JSON file
• Bring this JSON file into Xcode and implement it with some Swift code.

02. Sketch file

Our Sketch file contains 4 art-boards and their shapes: beacon, smartwatch, mobile and our logo. Here’s a screencast that shows you how to setup an art-board, add a coloured background rectangle and start drawing out it’s shape.

The screencasts that follow have no music so you can listen to your own tracks and not get interrupted. Enjoy.

Setting up an art-board, it’s background colour and shape in Sketch.

The final art-board in the art-board has 2 states of the logo and you’ll find out why once we bring it into After Effects.

Our final file, complete with art-boards and their shapes.

03. After Effects animation

Start setting up your After Effects file.

This screencast takes us through:

• Creating a composition at 375px x 667px (25 fps)
• Adding a shape layer for the background.

Next up, how to get the shapes in Sketch into After Effects.

• Export the shapes you’ve created in Sketch as .EPS files
• Bring them into After Effects and convert them to editable paths, clean up these paths

Create the shape morph and tweak the timeline.

• Add another shape layer that we’ll use to morph between these shapes, add path and fill modifiers to it so we can see it
• Keyframe each icon’s path and copy them over to the shape layer we’ll use to morph between each icon
• Tweak keyframe interpolation until the first 4 icons morph from one to another smoothly, add 180° clockwise rotation to each icon morph to give it character
• Make the background colour change with each shape morph.

One of the last things we have to do in After Effects is to transition from the last shape to our logo icon.

• Add a null then parent our icon to it
• Pop this in as the shape that precedes it pops out of view
• Export the completed animation with Bodymovin

We exported the JSON file to this path and name:

Desktop/Mobiddiction Lottie Tutorial/Xcode/MobiddictionLottieTutorial/MD Logo Animation.json

04. Xcode file

We’re going to stop here and bring where we are into XCode. There will be a follow up tutorial that gets the looping animation running in Android Studio. For now, we have all we need to make working prototype in Xcode.

• Open the Xcode workspace file you created earlier in this tutorial
• Drag the JSON file into Xcode as an asset
• Write the code needed to loop it
• Test on an iPhone 7 emulator

To create the on-boarding version we’ll setup a swipe controller and it’s code to swipe between each icon morph.

We’ll skip to the end result and provide you the code we’ve just written in both examples in the source files.

Your final Xcode screen and it’s working prototype should look like this:

Congratulations, you’re done!

Here’s the source files for this project, they can help you create your own projects and teach you how to reproduce this tutorial:

https://drive.google.com/file/d/13sNRL74cg8aJBKhV50S4LCU3wlbQk6Mk/view?usp=sharing

Good luck and have fun 😀.

For more content:

Follow me here at Medium, Twitter and YouTube.

Update (31st March): Android Studio Tutorial.

The Android version of this tutorial that covers setting up Lottie inside Android Studio and getting the looping animation working is now ready, you can read it here:

Native app animations in Android Studio using Lottie from Airbnb.