Widget Animations

This allows you to add animations to widgets available in our widget collection.

Below are the types of animation that we support:

Adding animation

There are two ways to animate a widget:

1. Animation on page load

Animations defined on a page load will activate immediately when the page is loaded. An example of this is a login form sliding into view as soon as the page becomes visible.

To add animation on page load:

First, add the widget you would like to animate.
Move to the properties panel and select the Animations tab (on the right side of your screen).
By default, the On Page Load tab is already selected. Click on + Add Animation and search or select the type of animation.
To keep on repeating the animation, switch on the Loop Animation toggle.
To reverse the animation immediately after it has reached its final state, switch on the Reverse Animation toggle.
If you want to hide the widget before the animation begins, enable Hide Before Animating.
If you want to add multiple animations and run them together for the same amount of time (e.g., slide and scale widget at the same time), enable the Apply same duration & delay. Keep it disabled to create staggered animation.
Inside the added animation, set the Animation Curve to the desired one among the Ease In, Ease Out, Ease In Out, Bounce, Elastic, and Linear. This tells how an animation should behave over a specified duration. You can try each one to see which one fits better.
The Duration value specifies the time the animation will run. Note: This value should be in milliseconds (e.g., 1000ms = 1 second). You can also set this value from a variable.
Set the Delay if you want to start the animation after a defined time. You can also set this value from a variable.
See how to configure the animation.
Click on the Preview button (at the top) to see the animation in action.

2. Animation on action trigger

You can also trigger an animation on click of a button. For example, sliding out the list item with the click of a delete button.

Animating widget on action trigger comprises the following steps:

To define an animation that will run on the tap of a button:

Select the widget (e.g., Container), move to the properties panel, and select the Animations tab (on the right side of your screen).
By default, the On Page Load tab is selected. Change it to On Action Trigger.
Click on + Add Animation and search or select the type of animation.
By default, the Apply Initial State is enabled. This will reset the animation before it is triggered.
If you want to hide the widget before the animation, enable Hide Before Animating.
If you want to add multiple animation types and run them together for the same amount of time (e.g., slide and scale widget at the same time), enable the Apply same duration & delay. Keep it disabled to create staggered animation.
Inside the added animation, set the Animation Curve to desired one among the Ease In, Ease Out, Ease In Out, Bounce, Elastic, and Linear. This tells how an animation should behave over a specified duration. You can try each one to see which one fits better.
The Duration value specifies the time animation will run. Note: This value should be in milliseconds (e.g., 1000ms = 1 second). You can also set this value from a variable.
Set the Delay if you want to start the animation after a defined time. You can also set this value from a variable.
See how to configure the animation.
Click on the Preview button (at the top) to see the animation in action.

2.2 Trigger animation

See how you can add an action that will trigger the defined animation.

pageWidget Animation

Configure animation

This section helps you configure different animation types.

Prerequisites

To configure the animation, make sure you add the animation.

1. Fade

Fade animation gradually changes the opacity of a widget, transitioning it from invisible to visible or vice versa. It's widely used for smooth introductions of elements on the screen and to focus user attention by fading in or out content or UI elements.

To configure Fade animation, inside the Fade section, enter the values for the following properties:

Initial Opacity: Set this to determine the starting visibility level of the animation. Use the slider or input a value between 0 and 1, where 0 is fully transparent and 1 is fully visible. For instance, setting it to 0.5 begins the fade animation with the widget partially visible.
Final Opacity: This defines the visibility level at the end of the animation. Adjust it using the slider or by entering a value between 0 (no visibility) and 1 (full visibility). For example, a value of 0.5 will leave the widget partially visible when the animation concludes.

2. Slide

Slide animation involves moving a widget across the screen, typically used to introduce widget in a dynamic, visually engaging way, like sliding in menus, pages, or notifications.

There are two types of slide animation you can add to the widget:

While configuring Horizontal Slide or Vertical Slide:

If you only set the Initial Position (and leave the Final Position), the current position will be considered as the Final Position value.
When the text direction is Right to Left, the animation directions will be opposite.

2.1 Horizontal slide

To configure the horizontal slide animation, inside the Slide > Horizontal Slide section, enter the values for the following properties:

Initial Position: Define where the animation begins. Use the slider or input a value. For example:
- A value of 0 starts the animation at the widget's current position.
- -100 starts it 100px to the left of the current position.
- 100 begins it 100px to the right of the current position.
Final Position: Determine where the animation ends. Use the slider or enter a value. For instance:
- A value of 0 ends the animation at the current position.
- -100 ends it 100px to the left of the current position.
- 100 finishes it 100px to the right of the current position.

If you want the widget to come and go off the screen, give the Initial Position and Final Position a higher positive or negative value.

2.2 Vertical slide

To configure the vertical slide animation, inside the Slide > Vertical Slide section, enter the values for the following properties:

Initial Position: Set where the animation starts by adjusting the Initial Position. Use the slider or type in a value. For instance:
- 0 begins the animation at the current position.
- -100 starts it 100px above the current position.
- 100 initiates it 100px below the current position.
Final Position: Define the animation's end point with the Final Position. Adjust using the slider or enter a value. For example:
- 0 completes the animation at its current position.
- -100 finishes it 100px above the current position.
- 100 ends it 100px below the current position.

If you want the widget to come and go off the screen, give the Initial Position and Final Position a higher positive/negative value.

3. Scale

Scale animation dynamically changes the widget's size, often used to draw attention to or subtly introduce UI components, like magnifying buttons on hover or animating dialog boxes to appear from a central point.

To configure the scale animation, inside the Scale section, enter the values for the following properties:

Initial Scale: This will be the widget size before starting the animation.
Final Scale: This will be the widget size after the animation ends.

For a growing animation effect, set the Final Scale value higher than the Initial Scale. Conversely, to achieve a shrinking effect, the Final Scale should be lower than the Initial Scale.

4. Rotate

Rotate animation makes widget on a screen turn around a fixed point. It's often used for simple effects like spinning a loading icon or refreshing a page.

To configure the rotate animation, inside the Rotate section, enter the values for the following properties:

Initial Turns: Specifies the rotation degree before the animation begins. It's typically set at 0.
Final Turns: The number of turns a widget will take in animation.

One turn equals 360 degrees—for instance, a value of 0.5 results in a 180-degree rotation.
By default, the widget rotates in a clockwise direction. To turn the widget anticlockwise, enter the negative value.

5. Shake

Shake animation moves widget back and forth quickly, often used to draw attention to an element or indicate an error, like when a user enters incorrect information in a form field.

To configure the shake animation, inside the Shake section, enter the values for the following properties:

Frequency: Set how many shakes occur per second.
Horizontal Offset: Define the shake distance horizontally. A higher value intensifies the shake. A negative value begins shaking from the opposite direction.
Vertical Offset: Set the vertical shake distance. Increase the value for a stronger shake. Use a negative value to start from the opposite direction.
Rotation Angle: Determine the shake angle across both axes.

6. Blur

Blur animation gradually changes an widget's clarity, typically used to shift focus by blurring the background while highlighting a pop-up or important content, creating a depth effect in the user interface.

To configure the blur animation, inside the Blur section, enter the values for the following properties:

Initial Radius: Determines the blur radius at the start of the animation.
Final Radius: Sets the blur radius at the end of the animation.

To create the unfocus effect, the Final Radius value should be greater than the Initial Radius. Whereas to create the focus effect, it should be lower than the Initial Radius.

7. Saturate

Saturate animation adjusts the color intensity of a widget, often used to enhance visual appeal by making colors more vibrant for focused content or creating a muted effect for background elements.

To configure the saturate animation, inside the Saturate section, enter the values for the following properties:

Initial Strength: This will be the saturation strength before the animation starts.
Final Strength: This will be the saturation strength after the animation ends.

The values for the Initial Strength and Final Strength are in percentage.
0% indicates fully desaturated, 100% indicates normal saturation, whereas any value beyond 100% indicates over saturation.

8. Tilt

Tilt animation involves slightly rotating an widget along its axis, typically used to add a subtle interactive element to UI components, like buttons or cards, indicating user interaction or focus.

To configure the tilt animation, inside the Tilt section, enter the values for the following properties:

Horizontal Tilt:
- Initial Tilt: The tilt before the animation starts in the horizontal direction.
- Final Tilt: The tilt after the animation ends in the horizontal direction.
Vertical Tilt:
- Initial Tilt: The tilt before the animation starts in the vertical direction.
- Final Tilt: The tilt after the animation ends in the vertical direction.

The higher value adds more tilt to the widget.
The negative value will start the transform effect from the opposite direction.

9. Flip

Flip animation rotates an element around its horizontal or vertical axis, creating a mirror effect. It's often used for flipping cards in a UI to reveal hidden information.

To set up the flip animation, navigate to the Flip section and configure the following properties:

Initial Flip: Specifies the initial number of flips the widget starts with.
Final Flip: Determines the number of flips the widget will animate to.

For instance, setting both Initial and Final Flip to 1 results in a single flip of the widget. Alternatively, setting Initial Flip to 0 and Final Flip to 1 will flip the widget 360 degrees.

10. Shimmer

Shimmer animation creates a "shiny" effect moving across the screen, often used to signify that data or content is in the process of loading or being fetched.

To set up the shimmer animation, navigate to the Shimmer section and configure the following properties:

Color: It's the color of the "shiny" line or gradient that sweeps over the content. A common practice is to use a slightly lighter shade than the content's background color for a subtle and effective look.
Angle (degrees): This property determines the direction of the shimmer effect across the content, defined in degrees: 0 degrees for horizontal, and 90 degrees for vertical movement.

11. Tint

The tint animation adds a color overlay effect to your content, and its properties include:

Color: Choose the color for the tint overlay.
Initial Strength: Set the starting intensity of the tint, from 0% (no tint) to 100% (full color).
Final Strength: Determine the final intensity of the tint, also ranging from 0% to 100%.

Staggered animations

A staggered animation is multiple animations executed in a series (one after another). Adding staggered animations can help you create a stunning visual effect.

Here's an example of staggered animation:

To create staggered animation:

Ensure you disable the Apply same duration & delay option.
Add multiple animations by clicking on + Add Animation.
Set the delay for your new animation based on the total duration of all previously added animations. For instance, if the first two animations each last 1000ms (1 second), the delay for the third animation should be 2000ms (2 seconds). This ensures the third animation begins only after the completion of the first two, each lasting 1 second.

Example: set value from variable

You can set animation values dynamically using the variables of your app. This flexibility allows you to create more sophisticated animations.

Currently, we only support setting variable values for duration and delay properties. Very soon, it will be available for all properties of each type of animation.

Let's see an example of creating a beautiful animation where a list of items is sliding in from left to right. Here's how it looks:

If you notice carefully, the items appear in a staggered fashion. This can be achieved by setting the delay value of each item based on its position (index) in the list. Here's how exactly you do it:

Select the item in the list and add the Slide animation.
In the Delay property, open the variable menu and add a code expression to calculate the delay value based on the item's index. For this example, we use the formula [index] * 100, where index represents the position of the item, and 100 is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.