Introduction
The Lottie component loads and displays adjustable vector animations from LottieFiles, allowing for animations whose playback speed can change based on user interactions.
On the Canvas, the Lottie component displays animations exactly as they appear on the LottieFiles website.
Frame Block
The Frame attributes of the Lottie component are the same as those of the Rect component. For details, refer to the Rect component’s Frame section.
Properties Block
The Properties of the Lottie component inherit the basic properties of the Rect component. For details, refer to the Rect component’s Properties section.
Additional Properties
Property Name | Property Type | Description |
URI | String String | The animated JSON config content from the URI provided by LottieFile. Set the Lottie Animation URI provided by LottieFiles. You need to register and log in, select an animation, and copy the link from the information section to paste here. |
MD5 | String String (128-bit hash value) | The checksum of the URI. Automatically generated checksum based on the URL to ensure file integrity and consistency during transmission. |
Source | Object JSON | The animated JSON config content. The You can directly paste the Lottie JSON content into the Source field. When this field is filled, it will override the URI field. This allows designers using self-created JSON files to use them without uploading to LottieFiles. |
Speed | Number Number (1, 1.5, 2, 2.5) | The speed of the lottie animation. Set the animation playback speed. Only four playback speeds are supported. |
Loop | Boolean Boolean (Yes/No) | To set whether the lottie animation will be played on repeat. Set whether the animation will loop. |
Auto Play | Boolean Boolean (Yes/No) | To set whether the lottie animation will be played automatically when the application is launched. Set whether the animation will automatically start playing when loaded. |
Resize Mode | One Of list | The resize methods that will be applied when the lottie file's dimensions differ from the lottie brick's (the container's) dimensions. For more info: Resize Mode. Set how the Lottie animation is displayed within the component. Options are the same as the Video component’s Resize Mode. |
Render Mode | One Of list | (Android Only) A flag to set whether or not to render the lottie animation with hardware or software acceleration. The option (Android only) Select whether to render the Lottie animation with hardware or software acceleration. The auto option applies the optimal rendering mode depending on the system and device condition. |
Properties – Border Block
The border attributes are the same as those of the Rect component. For details, see the Rect component’s Border section.
Animations Block
The animation event attributes are the same as those of the Rect component. For details, see the Rect component’s Animation section.
Additional Animation Events
On Animation Finish | Animation that will be triggered when the lottie is finished playing. Triggered when the animation finishes playing. |
Uri On Load | Animation that will be triggered when the lottie is loaded successfully. Triggered when the animation URI loads successfully. |
Uri On Load Error | Animation that will be triggered when an error occurs loading the lottie. Triggered when loading the animation URI fails. |
Events Block
The event attributes are the same as those of the Rect component. For details, see the Rect component’s Event section.
Additional Events
On Animation Finish | Event that will be triggered when the lottie is finished playing. Event triggered when the animation finishes playing. |
Uri On Load | Event that will be triggered when the lottie is loaded successfully. Event triggered when the animation URI loads successfully. |
Uri On Load Error | Event that will be triggered when an error occurs loading the lottie. Event triggered when loading the animation URI fails. |