The Design Guide to Winning Developers’ Hearts . Part 1, Use Lottie

Phillip Lee
Sep 6, 2017 · 6 min read

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.

A little bit of motion can add a lot a bit of personality!

The workflow basics

The Lottie workflow

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.

Convert your text layers to shapes

Similar to the above, Bodymovin will not export your text layers unless they are shapes.

Enable scripts

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

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.

Restart AE and Open Bodymovin

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

Export

The Bodymovin window looks like this:

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.

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

For Android

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

<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"
/>
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.playAnimation();

Other Solutions

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.

  1. Wide breadth of supported AE features (Keyframes have limited supported features).
  2. Ease of use (we found Quartzcode to be a bit buggy).
  3. 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!

Prolific Interactive

We are a mobile product agency based in New York, San Francisco, and Durham.

Phillip Lee

Written by

https://philliplee.persona.co/

Prolific Interactive

We are a mobile product agency based in New York, San Francisco, and Durham.