Animations with Lotti for SVG-like Animations created by After Effects for iOS, Android and React Native by AirBnB

Lottie

AirBnB: Behind the scenes of our new open-source animation tool.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.

Lottie also has several features built into its API to make it more versatile and efficient. It supports loading JSON files over the network, which is useful for A/B testing. It also has an optional caching mechanism, so frequently used animations, such as a wish-list heart, can load a cached copy each time. Lottie animations can be driven by gestures using the animated progress feature, and animation speed can be manipulated by changing a simple value. iOS even supports adding additional native UI to an animation at runtime, which can be used for complex animated transitions.

Lotti Introduction

• iOS
• Android
• React Native
• LottieFiles object library

Dynamic Texts, Fonts and Images

• https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/TextDelegate.java
• https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/FontAssetDelegate.java
• https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/ImageAssetDelegate.java
• AnimatorListener
• AnimatorUpdateListener
• https://stackoverflow.com/questions/48264528/interact-with-lottie-animation-elements

Adobe After Effects

• bodymoving plugin for exporting from After Effects
• Supported After Effects features per OS version to provide to designers

Some alternates

Marcus Eckert: Squall

Facebook: Keyframes, Delivering scalable high quality animations to mobile clients