LottieAnimation
The LottieAnimation widget allows you to display Lottie files from uploaded assets or the URL link. Lottie files are high quality (they do 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.
Adding LottieAnimation
Showing Lottie files in a LottieAnimation widget comprises the following steps:
1. Getting Lottie files
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.
1.1 Downloading the Lottie JSON file
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:
Open https://lottiefiles.com/ and search for the required animation.
Select the animation you would like to add. This will open a new popup.
Click on the Download button and select Lottie JSON.
1.2 Copying Lottie animation URL
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:
Open https://lottiefiles.com/ and search for the required animation.
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.
2. Adding LottieAnimation widget
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.
Find the Path property and enter the URL (see how to get it 1.2) for the new Lottie file.
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.
3. Changing animation source
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.
Customizing
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
Changing animation type
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.
Change frame rate
By default, animations are played at the frame rate specified when they are exported from After Effects, usually at 10 or 30 FPS. Modern phones, however, can support higher refresh rates, such as 60 or 120 FPS. If you're not satisfied with how the animation looks at these default settings, you can adjust its frame rate to a smoother 60 FPS for better quality.
To do so, move to the properties panel > Lottie Animation > enter the value in the Frame Rate field.
Changing the box fit
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.
Common widget properties
See how to work with Widget Styling, Visibility, Padding & Alignment, and Testing.
Start/pause animation on button press
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:
pageLottie AnimationLast Updated Date: April 15, 2024
Last updated