Animations
Adding animations to your app enhances the user experience. A well-choreographed animation can make the app look and feel more intuitive.
This page walks you through how to add an animation to your widgets.
Animation in FlutterFlow
Below are the types of animation that we support:
1. Fade
It makes your widget appear and disappear gradually.
2. Slide
It moves (changes the position) your widget on the screen.
3. Scale
It changes the size of the widget.
4. Rotate
It spins the widget clockwise or anticlockwise.
5. Shake
Creates the shake effect on a widget.
6. Blur
Creates a focus or un-focus effect on a widget.
7. Saturate
Creates a color saturation effect on a widget.
​
8. Tilt
Creates a transforming effect (3D perspective) on your widget.
There are two ways you can add an animation to widgets:
- 1.
- 2.
Animations defined on page load start running as soon as the page is loaded. For example, sliding in the login form as the page becomes visible.
.gif?alt=media&token=c34c8f9c-5812-4af7-9243-f8ffaf29a6db)
Animation on page load
To add animation on page load:
- 1.
- 2.Move to the properties panel and select the Animations tab (on the right side of your screen).
- 3.By default, the On Page Load tab is already selected. Click on + Add Animation and search or select the type of animation.
- 4.If you want to hide the widget before the animation begins, enable Hide Before Animating.
- 5.If you want to add multiple animations and run them together for the same amount of time, enable the Apply same duration & delay. Keep it disabled to create staggered animation.
- 6.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.
- 7.The Duration value specifies the time animation will run. Note: This value should be in milliseconds (e.g., 1000ms = 1 second).
- 8.Set the Delay if you want to start the animation after a defined time.
- 9.
- 10.Click on the Preview button (at the top) to see the animation in action.
Adding animation on page load
Animations defined On Action Trigger start running as soon as the Animation Action is triggered. For example, sliding out the list item with the click of a delete button.
Animation on action trigger
Animating a widget On Action Trigger comprises the following steps:
- 1.
- 2.
To define an animation that will run on the tap of a button:
- 1.Select the widget (e.g., Container), move to the properties panel, and select the Animations tab (on the right side of your screen).
- 2.By default, the On Page Load tab is selected. Change it to On Action Trigger.
- 3.
- 4.By default, the Apply Initial State is enabled. This will reset the animation before it is triggered.
- 5.If you want to hide the widget before the animation, enable Hide Before Animating.
- 6.If you want to add multiple animation types and run them together for the same amount of time, enable the Apply same duration & delay. Keep it disabled to create staggered animation.
- 7.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.
- 8.The Duration value specifies the time animation will run. Note: This value should be in milliseconds (e.g., 1000ms = 1 second).
- 9.Set the Delay if you want to start the animation after a defined time.
- 10.
- 11.Click on the Preview button (at the top) to see the animation in action.
Define animation On Action Trigger
See how to add this action on the following page:
This section helps you configure different animation types.
To configure Fade animation, inside the Fade section, enter the values for the following properties:
- Initial Opacity: If you want to start the animation from particular visibility, set the Initial Opacity by using the slider or entering a value. For example, A value of 0.5 will start the fade animation from partial visibility. The Initial Opacity can accept a value between 0 to 1. Where 0 means no visibility and 1 represents complete visibility.
- Final Opacity: If you want to have a particular visibility when the animation ends, set the Final Opacity by using the slider or entering a value. For example, A value of 0.5 will bring the widget to partial visibility when the animation ends. The Final Opacity can accept a value between 0 to 1. Where 0 means no visibility and 1 represents complete visibility.
Configure Fade animation
There are two types of slide animation you can add to the widget:
- 1.
- 2.
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.
To configure the horizontal slide animation, inside the Slide > Horizontal Slide section, enter the values for the following properties:
- Initial Position: If you want to start the animation from a specific position, set the Initial Position by using the slider or entering a value. For example, A value of 0 will start the animation from the current position. A value of -100 will start the animation 100px from the left side of the current position. A value of 100 will start the animation 100px from the right side of the current position.
- Final Position: If you want to end the animation at a specific position, set the Final Position by using the slider or entering a value. For example, A value of 0 will end the animation in the current position. A value of -100 will end the animation 100px on the left side of the current position. A value of 100 will end the animation 100px on the right side of the current position.
Horizontal slide-1
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.
Horizontal slide-2
To configure the vertical slide animation, inside the Slide > Vertical Slide section, enter the values for the following properties:
- Initial Position: If you want to start the animation from a specific position, set the Initial Position by using the slider or entering a value. For example, A value of 0 will start the animation from the current position. A value of -100 will start the animation 100px from the top side of the current position. A value of 100 will start the animation 100px from the bottom side of the current position.
- Final Position: If you want to end the animation at a specific position, set the Final Position by using the slider or entering a value. For example, A value of 0 will end the animation in the current position. A value of -100 will end the animation 100px on the top side of the current position. A value of 100 will end the animation 100px on the bottom side of the current position.
Vertical slide-1
If you want the widget to come and go off the screen, give the Initial Position and Final Position a higher positive/negative value.
Vertical slide-2
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.
To create the growing animation effect, the Final Scale value should be greater than the Initial Scale. To create the shrinking effect, it should be lower than the Initial Scale.
Configure Scale animation
To configure the rotate animation, inside the Rotate section, enter the values for the following properties:
- Initial Turns: The number of turns before the animation starts. Ideally, this should be 0 only.
- Final Turns: The number of turns a widget will take in animation.
- 1 turn is 360 degrees. If you enter the value as 0.5, the widget will rotate by 90 degrees.
- By default, the widget rotates in a clockwise direction. To turn the widget anticlockwise, enter the negative value.
Configure Rotate animation
To configure the shake animation, inside the Shake section, enter the values for the following properties:
- Frequency: The approx number of times to repeat the shakes per second.
- Horizontal Offset: Here, you can specify the distance to travel while it shakes in the horizontal direction. To create an intense shake effect, enter the higher value. The negative value will start the shake effect from the opposite direction.
- Vertical Offset: Here, you can specify the distance to travel while it shakes in the vertical direction. To create an intense shake effect, enter the higher value. The negative value will start the shake effect from the opposite direction.
- Rotation Angle: This specifies the angle the widget should shake on both axes.
Configure Shake animation
To configure the blur animation, inside the Blur section, enter the values for the following properties:
- Initial Radius: This will be the radius of the blurriness before the animation starts.
- Final Radius: This will be the radius of the blurriness after the animation ends.
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.
Configure Blur animation
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.
Configure Saturate animation
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.
Configure Tilt animation
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:
Staggered animations
To create staggered animation:
- 1.Ensure you disable the Apply same duration & delay option.
- 2.Add multiple animations by clicking on + Add Animation.
- 3.Configure the delay of the newly added animation. This should be the sum of the duration of all previously added animations. For example, if the duration value for the first and second animations is 1000ms (i.e., 1 second), then the delay for the third animation should be 2000 (i.e., 2 seconds). This will make the third animation wait 2 seconds until the previous two animations (each of 1 second) are completed.
Creating staggered animation
Last modified 2mo ago