Animations with Lottie

A brief introduction on the Airbnb/Lottie animation library and how it can improve user experience on mobile development.

Rubens Hardt Junior
https://linkedin.com/in/rubens-hardt-junior-23855b113/

Transcript

1. Animations with Lottie Rubens Hardt Junior
2. Gotta Animate 'Em All!
3. Agenda • Animations • Lottie ◦ Lottie for Android ◦ Lottie for iOS and React Native • Alternatives • Conclusion • Reference • Surprise
4. Animations :(
5. Animations • In the past: ◦ Difficult and lengthy process • Complex animations: ◦ Thousand lines • Because of this: ◦ Most apps were not using animation ◦ Hard-to-maintain code
6. Lottie :D
7. • Mobile library for Android, iOS and React Native Lottie Bodymovin { JSON } • Parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
8. • Animations as easily as static assets • JSON ◦ Extremely small in size ◦ Can be large in complexity! • Animations can be ◦ Played ◦ Resized ◦ Looped ◦ Speed up, slowed down ◦ Even interactively scrubbed • Optional caching mechanism ◦ Strong, Weak, or None Lottie
9. Lottie
10. Lottie
11. Lottie for Android
12. Lottie for Android • Gradle is the only supported build configuration
13. Lottie for Android • The simplest way to use it
14. Lottie for Android • Or you can load it programmatically
15. Lottie for Android • You can then control the animation or add listeners
16. Lottie for iOS and React Native
17. Lottie for iOS and React Native • NOT TODAY! • But sure, you can use it with iOS and React Native too • Lottie supports iOS 8 and above.
18. • Build animations by hand ◦ Make me! • Facebook Keyframes ◦ Faster (lighter) ◦ Less features • Gifs ◦ More than double the size of a bodymovin JSON ◦ Rendered at a fixed size • Png sequences ◦ Even worse than gifs Alternatives
19. • Really cool animations Conclusion • In a faster and easy way • The only limit is your imagination • It's free! ◦ (And open source, of course)
20. Reference • Creating Better User Experiences with Animations and Lottie ◦ https://pspdfkit.com/blog/2017/creating-better-user-experiences-with-animations-and-lottie/ • airbnb/lottie ◦ Android - https://github.com/airbnb/lottie-android ◦ iOS - https://github.com/airbnb/lottie-ios ◦ React Native - https://github.com/airbnb/lottie-react-native • Native app animations in Android Studio using Sketch, After Effects and Lottie from Airbnb. ◦ https://medium.com/creative-controller/native-app-animations-in-android-studio-using-lottie-fro m-airbnb-bbc039c87e63 • A Beginner's Guide to Lottie: Creating Amazing Animations in iOS Apps ◦ https://www.appcoda.com/lottie-beginner-guide/
21. Reference • Lottie - Behind the scenes of our new open-source animation tool ◦ https://airbnb.design/introducing-lottie/ • Bodymovin ◦ https://github.com/bodymovin/bodymovin • Lottie Files - Collection of high quality animations available in Lottie’s file format. ◦ https://www.lottiefiles.com/
23. Thank you!
24. It's Tiiiiime!