IOS, Android and Web programming
2020.3 - 2020.5
Lottie Playbook now has over 200 unique users.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON and renders them natively on mobile and the web. Intuit's designers have widely used it to create and ship beautiful animations. Yet, Lottie is a relatively new library. When designers hand Lottie animations in JSON format to developers, it will take a while for developers to figure out how to apply the animation in current products. Thus, to fix the knowledge gap, it is necessary for design technologists to create a tool to ease frictions and boost production efficiency.
After collecting all the code snippets, I used React.js to build the "Lottie Playbook," a playbook that includes code snippets about how to use Lottie animations in IOS, Android, and Web environments. Lottie Playbook successfully speeds up the design and launch process, and as a result, benefits our customers.
The current version of Lottie Playbooks includes the following code snippets for IOS, Android, and Web:
how to get started with Lottie
basic animations, such as looping, playing animation by frame, time and markers
how to dynamically change content, such as changing color, text and images
advanced animations, such as using motion as a transition and putting several motions in a carousel
related links and resources
For each example, I include the following features:
corresponding After Effects files for users to download