Lottie Animation
The Lottie component lets you render Lottie animation files in your app. You can find free and premium Lottie animations on the Lottie site and other places around the web. Only the .json Lottie file type is supported with a max size of 5MB.
How to use
Section titled “How to use”The Lottie component can display Lottie animation files that you’ve uploaded to your Draftbit project’s Assets which will be bundled with your app’s files or you can give it a URL to a remote Lottie file. You can add one to your Screen from the component picker.
Style Properties
Section titled “Style Properties”Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Configuration Properties
Section titled “Configuration Properties”| Property | Description |
|---|---|
| Component name | The name of the component as it appears in the Screen’s component tree |
| Looping | Whether the animation should play once or repeat continuously. |
| Speed | The speed at which the animation will play. Negative and decimal values are supported. A negative value will reverse the animation. |
Data Properties
Section titled “Data Properties”| Property | Description |
|---|---|
| Source Type | Switch between URL or Data / uploaded Asset as the animation source |
| Source URL | The URL for the .json Lottie file to render when Source Type set to URL |
| Data Source | A variable containing Lottie JSON data or an uploaded Asset when Source Type set to Data |
Conditional Display
Section titled “Conditional Display”You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.