FlutterFlow Docs
Search…
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 widgets in your FlutterFlow app.

Adding Animation

There are two ways you can add an animation to widgets:

1. Animation on Page Load

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.
Animating a widget on page load comprises of the following steps:
  1. 1.
    Adding Widget to Animate
  2. 2.
    Define Animation on Page Load

1.1 Adding Widget to Animate

Animations are applied on a widget. Hence, you first need to add a widget that you want to animate.
Let's add a widget called Container from the Layout Elements tab (in the Widget Panel) or add it directly from the Widget Tree tab.
The Container widget is used for simplification purposes. You could add any widget of your choice.

1.2 Define Animation on Page Load

Let's define an animation that will fade in (show gradually) the widget.
To define an animation on page load:
  • Select the widget from the widget tree or from the canvas area.
  • Click on the Animations tab (on the right side of your screen).
  • Click on + Add Animation and select the On Page Load option.
  • Set the Animation Curve to desired one among the Ease In, Ease Out, Ease In Out, Bounce, Elastic, and Linear.
  • Change the Duration to 1000 ms (millisecond). That means the animation will complete in 1000 ms i.e 1 second.
  • Set the Delay if you want to start the animation after a defined time.
  • Under the Animatable Properties, keep the Fade In checkbox selected.
  • If you want to start the animation from partial visibility, set the Initial Offset 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 Offset can accept a value between 0 to 1. Where 0 means no visibility and 1 means full visibility.
  • If you want to end the animation when a widget reaches particular visibility, set the Final Offset by using the slider or entering a value. For example, A value of 0.5 will end the animation when the widget becomes partially visible. The Final Offset can accept a value between 0 to 1. Where 0 means no visibility and 1 means full visibility.
  • Scroll down and click on the Preview button to see animation in action.
The Animation Curve defines how the animation is performed over the specified duration. Learn more about Animation Curve here.

2. Animation on Action Trigger

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.
Animating a widget on Action Trigger comprises of the following steps:
  1. 1.
    Adding Widgets to Animate
  2. 2.
    Define Page Load Animation
  3. 3.
    Adding Action to Trigger Animation

2.1 Adding Widgets to Animate

Let's add two widgets. (one widget to animate and second to trigger the Animation action)
  • Drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree and bring it to the center using the Alignment property.
  • Add a Container widget inside the Column and change its color.
  • Add a Button widget after the Container and apply the appropriate padding and set its Text to Animate.

2.2 Define Animation on Action Trigger

Let's define an animation that will fade in (show gradually) the widget on click of a button.
To define an animation that will run on the button click:
  • Select the widget from the widget tree or from the canvas area.
  • Click on the Animations tab (on the right side of your screen).
  • Click on + Add Animation and select the On Action Trigger option.
  • Set the Animation Curve to desired one among the Ease In, Ease Out, Ease In Out, Bounce, Elastic, and Linear.
  • Change the Duration to 2000 ms (millisecond). That means the animation will complete in 2000 ms i.e 1 second.
  • Set the Delay if you want to start the animation after a defined time.
  • Under the Animatable Properties, keep the Fade In checkbox selected.
  • If you want to start the animation from partial visibility, set the Initial Offset 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 Offset can accept a value between 0 to 1. Where 0 means no visibility and 1 means full visibility.
  • If you want to end the animation when a widget reaches particular visibility, set the Final Offset by using the slider or entering a value. For example, A value of 0.5 will end the animation when the widget becomes partially visible. The Final Offset can accept a value between 0 to 1. Where 0 means no visibility and 1 means full visibility.
  • Scroll down and click on the Preview button to see animation in action.

2.3 Adding Action to Trigger Animation

Know how to define an Animation action by visiting the following page:

Sliding Animation

Adding Slide Animation helps you move the widget on the screen.
There are two types of slide animation you can add to the widget:
  1. 1.
    ​Horizontal Slide​
  2. 2.
    ​Vertical Slide​

1. Horizontal Slide

To add the horizontal slide animation:
  • Add basic animation to any widget using the instructions here.
  • Move to the Animations tab (on the right side of your screen).
  • Scroll down to find the Animatable Properties.
  • If you want to start the animation from a specific position, set the Initial Offset 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. (When text direction is Right to Left, the animation start direction will be opposite)
  • If you want to end the animation to a specific position, set the Final Offset by using the slider or entering a value. For example, A value of 0 will end the animation to 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. (When text direction is Right to Left, the animation end direction will be opposite)
If you only set the Initial Offset (and leave Final Offset as it is) the current position will be considered as the Final Offset value.
If you want the widget to come and go off the screen, give the Initial Offset and Final Offset a higher positive or negative value.

2. Vertical Slide

To add the vertical slide animation:
  • Add basic animation to any widget using the instructions here.
  • Move to the Animations tab (on the right side of your screen).
  • Scroll down to find the Animatable Properties.
  • If you want to start the animation from a specific position, set the Initial Offset 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. (When text direction is Right to Left, the starting direction will be opposite)
  • If you want to end the animation to a specific position, set the Final Offset by using the slider or entering a value. For example, A value of 0 will end the animation to 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. (When text direction is Right to Left, the starting direction will be opposite)
If you only set the Initial Offset (and leave Final Offset as it is) the current position will be considered as the Final Offset value.
If you want the widget to come and go off the screen, give the Initial Offset and Final Offset a higher positive/negative value.

Scaling Animation

Adding Scale Animation helps you animate the size of the widget.
To add the Scale Animation:
  • Add basic animation to any widget using the instructions here.
  • Move to the Animations tab (on the right side of your screen).
  • Scroll down to find the Animatable Properties.
  • In the Initial Scale box, enter the value as 0. This will make the widget of size 0 before the animation starts.
  • In the Final Scale box, enter the value as 2. This will make the widget of the double size after the animation ends.
To create the growing animation effect, enter the value in the Final Scale higher than the Initial Scale.
To create the shrinking animation effect, enter the value in the Final Scale lower than the Initial Scale.

Combining Animation

Combining the Fade-in, Slide (Vertical-Horizontal), and Scale animation altogether can create a stunning effect.
To combine the animations:
  • Add any widget to your page.
  • Add Fade-in animation using the instructions here.
  • Add Slide animation using the instructions here.
  • Add Scale animation using the instructions here.