This month’s featured module is Ti.Animation, a library by Titan Michael Gangolf and Hans Knöchel, and an implementation of the AirBnb Lottie animation module for the Titanium SDK.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images.
AirBnb on Lottie:
Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them. Nick Butcher’s jump through animation, Bartek Lipinski’s hamburger menu , and Miroslaw Stanek’s Twitter heart demonstrate just how difficult and time consuming it can be to re-create animations from scratch. With Lottie, digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference will be a thing of the past. Now engineers can use exactly what the designer intended, exactly how it was made.
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.
Ti.Animation brings the capabilities of Lottie to Titanium apps, on both iOS and Android, allowing Titanium developers to create buttery smooth animations in their apps.
You can read more about Ti.Animation, Lottie and how to use it in your apps at the Ti.Animation repo.
We’ll be working on a follow-up post showing more detail on Ti.Animation along with some examples. Great work!
Do you enjoy these posts? Do you have any modules or widgets that you use and would like them featured here? Let us know in the comments.
Happy Coding!
In case you missed them, check out all our featured modules:
Or click the “featured module” tag below!
Follow us on social