This series of blog posts are written for the designer who longs to be the favorite amongst the dev team. These articles will help you become the one that all the devs fight to work with on their next project. You will become sought after among devs because you will know the secrets on how to fill their life with coding zen.

This series is also for the developer searching for ways to passive aggressively encourage their designer to stop making silly choices. Feel free to send this article to them via Slack or Email with the header “Thought you’d like this <3!”.

The first topic we will discuss: how to use Lottie in your animation workflow.

Animations are powerful.

They can inject life into a mundane loading screen or give personality to a drab on-boarding experience. The difference between a confused user and an empowered user can very well be a well designed animation.

But the process of implementing animations in apps can often be slow and tedious. A typical workflow involves designers handing off .mov files of their animations to engineers who then need to recreate it natively in code. Engineers tediously eyeball timing, movements and transformations until the animation looks just right. Making trivial changes to animations would mean going through this whole process again and again.

When the team at Airbnb released their animation framework, Lottie, we were immediately intrigued. They created Lottie as a way to quickly and accurately convert designer’s After Effects animations into native code. With Lottie, engineers can be sure that their designer’s intentions are realized with a few simple clicks.

Read more about why Airbnb created Lottie here and here.

What follows is a guide for how you can use Lottie to create some animation magic of your own. Give it a try, and we’re certain you’ll love it as much as we do!

Designers export their AE animations to a JSON file using an extension called Bodymovin. Engineers then use Lottie to drop the animations directly into their applications from the JSON file provided.

Steps 1 and 2 below will walk designers through prepping their AE file for export with Bodymovin. Step 3 will show how engineers how to use Lottie in their iOS and Android projects.

Resources:

• Adobe After Effects
• Bodymovin
• Lottie for iOS or Android

Prep Your Animation in Adobe After Effects

There are some key things for designers to note when creating animations:

Expressions Are Not Supported (Yet)

Bodymovin will convert your expressions into its JSON file, but Lottie will not be able to read them. If you want to use an effect like bounce or inertia, you need to manually create those keyframes. Tons of other features are supported though (masks, transforming solids, parenting), so use those to your heart’s desire. See the full list of supported After Effects features here.

Convert Your AI Files to Vector

In your AE composition, convert any linked Illustrator layers into vectors. If not, Bodymovin will export these layers as PNGs which may look pixelated if scaled up.

Enable scripts

You must give scripts like Bodymovin permission to look at your AE file and export out files.

Go into your General Preferences (After Effects/Preferences/General) and check the “Allow Scripts to Write Files and Access Network” box.

Export with Bodymovin

Download

Download the Bodymovin extension. There are multiple ways to get the extension, but the path of least resistance is downloading the .zxp file through AE Scripts. You’ll need to use the ZXP installer to install it on your computer.

If that doesn’t work, Bodymovin has a list of different ways to download the file.

Restart AE and Open Bodymovin

You’ll find Bodymovin in your Window/Extensions menu.

Export

The Bodymovin window looks like this:

Choose the composition you want to export from the list by clicking the bubble to the left of the composition name. Choose a destination folder for the JSON file.

It’s helpful to go into the Settings gear and check the “Demo” option. This will export an html file so you can double check to make sure everything is behaving as it should.

Hit the green “Render” button and you’re done!

Navigate to your destination folder and find the exported JSON file that you’ll hand off to your engineering team.

Finish with Lottie

Now that the engineering team has the file, they can integrate with Lottie.

For iOS

Integrate the Framework

CocoaPods and Carthage are both supported. Depending on which dependency manager you’re using, you’ll need to specify Lottie in your Podfile or Cartfile and either run pod install or carthage update.

Add the JSON File to the Xcode Project

Open Xcode and select File > Add Files to… and select the animation’s JSON file from the finder window. Ensure “Copy files if needed” is checked.

Add a Lottie Animation View

Initialize an instance of LOTAnimationView, passing the name of the animation’s JSON file into the “name” parameter. Set the frame of your LOTAnimationView to the size and position that you intend to place the animation. Add your LOTAnimationView as a subview, and call play:completion: passing a completion handler to be called once the animation has completed playing. Alternatively, call “play” and “pause” to manually control the playback of the animation.

        if let animationView = LOTAnimationView(name: "filename") { 
            animationView.frame = animationContainerView.frame 
            animationContainerView.addSubview(animationView) 
            animationView.loopAnimation = true 
            animationView.play(completion: { _ in }) 
        } 
 

Animation Options

Loop Animation

Set loopAnimation to “true” in order to loop the animation continuously. Your animation will not loop by default.

Animation Speed

Set the speed of the animation playback by changing the value of animationSpeed on your animation view.

Animation Duration

Set the duration of the animation playback by changing the value of animationDuration on your animation view.

Build and Run

Compile your project and run it in a simulator or on a device. Navigate to your animation and make sure that you’ve configured your LOTAnimationView correctly.

Android

You can find the GitHub repository here to read the documentation for Android integration.

Integrate the Framework

First, import the Gradle dependency to your project:

compile ‘com.airbnb.android:lottie:$versionNumber’

You can then play the animation two different ways. First, add a LottieAnimationView to your xml and then use the property “lottie_fileName” to reference your JSON file. For example:

<com.airbnb.lottie.LottieAnimationView 
        android:id="@+id/animation_view" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        app:lottie_fileName="hello-world.json"  
        />

For more flexibility, you can apply the animation programmatically like this:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view); 
animationView.setAnimation("hello-world.json"); 
animationView.playAnimation(); 

LottieAnimationView provides setters to customize the behavior of the animation.

Loop Animation

You can use the field app:lottie_loop=”true” to request looping of your animation in XML, or “animationView.loop(true);” in Java.

There are other tools that help bridge the gap between AE animations and native code – Facebook’s Squall and Keyframes are great examples. And Quartzcode doesn’t need AE to create its animations.

We prefer the AE + Bodymovin + Lottie combo for four reasons:

1. Both iOS and Android compatible (Squall is only iOS compatible).
2. Wide breadth of supported AE features (Keyframes have limited supported features).
3. Ease of use (we found Quartzcode to be a bit buggy).
4. The team at Airbnb is constantly updating Lottie with new features, including the ability to change animation properties (like color) and creating custom ViewController transitions. Cool!

All these tools are all meant to facilitate and enhance the design to dev workflow. The tools allow designers and devs to implement animations quickly and accurately. They are powerful, collaborative solutions that help us create better experiences for our users. Each have their own strengths and limitations, and we encourage you to check out each one to see what fits your needs.

This post is the first in a series from Product Designer, Phillip Lee, and iOS Engineer, Phill Farrugia, on better workflow processes between designers and developers.