Lottie Animation Guidelines
The iOS and Android SDKs come with built-in win/lose animations for widget interactions. These animations can be overridden as explained in the iOS and Android docs respectively. The following guidelines explain how the design assets can be created:
The following guidelines can be used to create LiveLike widget animations:
- Follow the instruction to download and install the Lottie plug-in "Bodymovin" in After Effects. We recommend version 5.3.4 since we have noticed rare issues with exports from newer versions.
- After installing, create a composition.
a. Sizes are listed below, standard is 300*200
b. Animations should not include text, only images. You can do this by right clicking “Text Element” > “Create” > “Create Shapes From Text”.
- Follow the Lottie instructions to make animation.
- Export the composition as JSON file.
- You can preview your Lottie animation in the mobile app before using it.
|Standard Win (Quiz, Prediction, Cheer Meter)||300 x 200||3 seconds|
|Standard Lose (Quiz, Prediction, Cheer Meter)||300 x 200||3 seconds|
Updated about 3 years ago