Animation by Lottie

Last updated last month

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.
​Set up​
​Edit Animation size​
Set up
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

Image Recognizer

-----Location-----

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

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