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:
Guidelines
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.
Animations List
Function | Dimensions | Duration |
---|---|---|
Standard Win (Quiz, Prediction, Cheer Meter) | 300 x 200 | 3 seconds |
Standard Lose (Quiz, Prediction, Cheer Meter) | 300 x 200 | 3 seconds |
Updated 12 months ago