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:

  1. 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.
  2. 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”.
  3. Follow the Lottie instructions to make animation.
  4. Export the composition as JSON file.
  5. You can preview your Lottie animation in the mobile app before using it.

Animations List

FunctionDimensionsDuration
Standard Win (Quiz, Prediction, Cheer Meter)300 x 2003 seconds
Standard Lose (Quiz, Prediction, Cheer Meter)300 x 2003 seconds