Animation by Lottie

Video Tutorial

โ€‹

Overview

The Animation component powered by Lottie makes adding animations as easy as adding images. For designers, animations can be created in Adobe After Effects or Haiku and imported as a .json file.

For the rest of us, there is a large and growing community of designers who have created free and editable animations that you can easily add to your app.

Getting Started

Property

Description

Animation

Please upload and reference your After Effects .json animations to your app project. You can create your own or find a library of open sourced ones from sites like thisโ€‹

Loop

If true, animation will run as a loop

Edit Animation size

For more information on sizing in your app, please see our introduction hereโ€‹โ€‹

Property

Description

Height

Fit contents Container is just as large as the animation; Fill container Container is as large as it can be on the Screen; Relative size Size in percent of the Screen; Absolute size Size in pixels

Width

Fit contents Container is just as large as the animation; Fill container Container is as large as it can be on the Screen; Relative size Size in percent of the Screen; Absolute size Size in pixels

Events

You can trigger some action to happen when the animation is clicked using the 'when Animation Click' event.