LottieAnimation
The LottieAnimation widget allows you to display Lottie files from uploaded assets or the URL link. Lottie files are high quality (it does not pixelate), smaller than GIF, and easy to add to any platform.
For example, you could use the LottieAnimation widget to show a nicely animated loading indicator to provide a great user experience to the users.
LottieAnimation widget
Showing Lottie files in a LottieAnimation widget comprises the following steps:
The LottieAnimation requires the Lottie file to be added to display the animation on the screen. You can get the Lottie files from its official collection in two ways.
The Lottie JSON file is required when you want to play the animation from the file uploaded to your project.
To download the Lottie JSON file:
- Select the animation you would like to add. This will open a new popup.
- Click on the Download button and select Lottie JSON.
Downloading the Lottie JSON file
The Lottie animation URL is required when you want to play the animation from the file hosted at https://lottiefiles.com/.
To copy the animation URL:
- Select the animation you would like to add. This will open a new popup.
- Find the Lottie Animation URL (bottom right of the playing animation) and copy it.
The Lottie animation URL is only visible when you are logged in.
Copying Lottie animation URL
To add LottieAnimation widget to your project:
- Drag the LottieAnimation widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Move to the properties panel (on the right side of your screen) and scroll down to the Lottie Animation section.
- By default, the animation will play as soon as the page loads. To disable this and play animation on a button click or any other event, uncheck the Auto Animate checkbox.
Adding LottieAnimation widget
By default, the widget's animation source is set to network. However, you can change this to use a Lottie file uploaded directly to your app.
Here's how you can change the animation source:
- Select the LottieAnimation widget from the widget tree or the canvas area.
- Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
- Find the Animation Source dropdown and select .
- Now, find the Asset Animation property, click the Upload LottieAnimation button, select the Lottie file and upload it.
Changing animation source
You can change the behavior of the LottieAnimation widget using the properties available inside the Properties Panel.
You can control how the animation is played, whether it should play only once, in a loop, or in a boomerang fashion (play back and forth).
To control the animation type:
- Select the LottieAnimation widget from the widget tree or the canvas area.
- Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
- Find the Animation Type dropdown and select among the Once, Loop, and Boomerang.
Once
Loop
Boomerang
Animation Type: Once
Animation Type: Loop
Animation Type: Boomerang
To change the height and width of the LottieAnimation widget:
- Select the LottieAnimation.
- Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
- Find the Width and Height.
- There are two ways to set the size:
- To set it to an exact size, select PX and enter the desired values.
- To set the dimensions as a % of the screen size, select % and enter the desired value.
The LottieAnimation inside of the container is constrained by the dimensions of the container. If you want to increase the LottieAnimation widget's size, you will also need to increase the container size.
Changing size
Changing the Box Fit value allows you to control how the Lottie file animation should display inside the LottieAnimation widget. Various options under the Box Fit property help you scale (grow or shrink in size) the Lottie file animation inside the LottieAnimation widget.
To change the Box Fit value:
- Select the LottieAnimation widget from the widget tree or the canvas area.
- Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
- Find the Box Fit dropdown, try changing the value among the Fill, Contain, Cover, Fit Width, Fit Height, None, and Scale Down.
Changing the box fit
You probably want to start or pause the animation when something happens in your app. For example, after saving the form, while data is loading, searching, etc. You can do this by triggering the Lottie Animation action.
Learn more about adding the Lottie Animation action on the page below:
Last modified 10mo ago