Using Lottie for your iOS apps

The Airbnb engineering team have released a library for converting After Effect animation to JSON file, that you can use for native apps. I'm going to share my short experience of using Lottie for an iOS project.

- Presentation made for Melborune Cocoaheads, March 2017

1. Using Lottie!
Jinju Jang

2. What is Lottie?
✦Lottie is an iOS, Android, and React Native library built by the
Airbnb engineering & design team.
✦It converts After Effects animations to a format for use in your
app.
✦After Effects animations in your app…?! So tempting!

3. …This is a lightning talk!
✦The learning curve - Time, difficulty, shippable or not.
✦My honest review - Good, bad, or weird experience through
the exploring.

4. Part 1.
The Learning curve
Lottie workflow & Time spent

5. Let’s make art!

6. Lottie Workflow
.JSON
Export Import
Body-
movin
Lottie

7. Time spent & Difficulty
DAY 1
Started learning 

After Effects
DAY 4
Made something
okay
Day 5++
Trying it with
Xcode!
! !!!!! !

8. Setting up Workflow 

= DONE!

9. Part 2.
(My honest) Review
Good, bad, and weird things

11. First impression 

= Easier than i thought!

13. creating conditions

17. Good = min-maxing!
✦From an idea to actual screen = less than 7 days
✦FYI, This type of idea usually gets rejected by your PM. 

(Because it takes too much time!)
✦A designer can work in parallel with a developer.
✦You can boost up creativity!
✦Super light. …The whole animation is only 9-15kb.

18. Bad…? Perhaps?
✦It’s less smart when you want to swap an animation to
something else. (We ended up using layer order)
✦Honestly, there is nothing *seriously* bad.

19. Weird = Frame rates
✦Frame rates seem slightly off compared to After Effects.
✦I don’t know what exactly causes this issue.
✦Let me know if you know how to solve this!
Note:
After the talk, many developers came to me and
explain why. It wasn’t smooth because the CPU
was rendering each single frame to show the
animation. (That was how Lottie worked!) 

—> Hmm… I guess that’s something you need to
trade off to get convenience for now!

20. Not now, but One day…
✦Complex layer effects
✦Merged vector layers
✦Gradient
✦Buttons
✦…Will be supported!

21. Please….

22. Conclusion
✦Recommend it, it’s really fun.
✦Until it becomes more clever, the best place to use it is
somewhere you don’t have to worry too much. (e.g: Replace
static illustration with a looping animation?)
✦Treat it as decoration.

23. Thank you!
@arle13