Lottie Animation Widget

Integrate Lottie animations in Blup for engaging and interactive user experiences with seamless animations.

Lottie
Lottie

Integrating a Lottie animation into your UI is straightforward. Follow these steps to make it happen:

1. Drag the Lottie widget from the Insert menu and drop it into your desired location within your UI.

**2.**Provide the URL of the Lottie animation file in the URL section of the editing panel. This URL should point to the location of the Lottie animation file.

3. Customize the appearance and behavior of the Lottie animation by adjusting its properties in the editing section on the right. You can modify properties such as size, position, Border to match your UI design and requirements.

Components of Lottie Widget

ComponentDescription

Align Icons

Click icons or use shortcut keys to align Lottie Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Lottie Widget.

Postitions

Set Lottie positions on the X and Y axis of the mobile canvas.

Lottie Size

Specify the width and height of the Appbar widget by providing values for width (W) and height (H).

Z rotation

Rotate the Lottie by specifying a rotation value.

Border Radius

Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner.

Margin

Provide margin to the Lottie from any of the four directions by specifying the margin value.

Lottie Properites

Here you provide the Lottie files assets according to your need.

Repeat

When checking the repeat option, it will keep on repeating the Lottie animation.

Reverse

When checking the reverse option, it will reverse the animation.

Fill color

By fill color, you can provide the background color to the Lottie widget.

Border Color

Choose a color to set the widget border color. Adjust the border color from inside, outside, or center of the widget by selecting it from the drop-down.

Border Width

Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes.

Shadow

Apply a shadow effect to the widget by selecting either a normal or inner shadow type.

Visible

By checking the checkbox the entire selected Lottie widget will be hidden.

If you have any ideas to make Blup better you can share them through our Discord community channel

Music to go with.

Lofi music

Last updated