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

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