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

Mmmmmmm, native app animations.
  • What do you use to author the asset?
  • What format does an iOS or Android developer need?
  • Sketch
  • After Effects
  • Lottie from Airbnb
  • Xcode
Looping and on-boarding animations running inside the Xcode Simulator.

01. Setup Lottie

Install Bodymovin

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

Install Lottie in Xcode

Setup CocoaPods

pod --version
sudo gem install cocoapods
pod setup

Create an Xcode Project

Install Pod File

cd /Users/yourusername/Desktop/Mobiddiction\ Lottie\ Tutorial/Xcode/MobiddictionLottieTutorial
pod init
pod ‘lottie-ios’
pod install

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

Setting up an art-board, it’s background colour and shape in Sketch.
Our final file, complete with art-boards and their shapes.

03. After Effects animation

  • Creating a composition at 375px x 667px (25 fps)
  • Adding a shape layer for the background.
  • 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
  • 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.
  • 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

04. Xcode file

  • 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

Congratulations, you’re done!

For more content:

Update (31st March): Android Studio Tutorial.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christopher Deane

Christopher Deane

Loving Husband and Awesome Dad. Principal Designer. Design System Consultant. Content Creator.