Popup animation

Let's implement the following animation:

As we can see the animation is made of 3 components:

1. Popup panel
2. Text
3. Button

To create the animation in Godot let's consider this basic Hierarchy:

Before writing any code let's see how the animation is made:

• The panel opens
  • → then the text is animated
    • → then the button is animated but its starting time is anticipated of about 0.2 seconds

In this example the Panel opening is realized animating the scale:y property from 0 → 1. The Label uses the built-in typewrite animation; while the Button uses the tada one.

We want to animate the popup as soon as the scene is open, so let's add our code inside the _ready function:

The animation

func _ready():
  Anima.begin_single_shot(self)

In this case I'm adding an AnimaNode by code, but you could manually add one to the scene; there is no difference and is completely up to you. Also, we can use either begin or begin_single_shot without difference in how the animation is created/played. Is completely up to you to decide which one suits your need.

The Panel

Because we're animating a single node we're going to use the Anima.Node utility class and its anima_scale_y method:

.then( Anima.Node(self).anima_scale_y(1.0, 0.3).anima_from(0) )

The second parameter of anima_scale_y indicates the duration in seconds, and in this case is 0.3 seconds.

note

We have manually specified the from value because, if omitted, Anima would use the scale:y value we have when the animation is created.

The Text

As we said before the text is animated by using the built-in typewrite animation:

.then( Anima.Node($VBoxContainer/Label).anima_animation("typewrite", 0.01) )

Once again we used the Anima.Node utility class because we're animating a single node. While the anima_animation let us specify the name of the animation to use and its duration.

note

Typewrite is a "special" animation where we specify the duration of animating the single character, instead of the entire animation.

The Button

The button animation starts slightly before the text one completes. So, before writing any code let's see how to achieve that:

We could define the animation as parallel, using the with syntax, but because the text animation depends by its length we would need to manually calculate the delay to apply.

So, how can we solve this? By using a negative delay :)

.then( Anima.Node($VBoxContainer/Button).anima_animation('tada', 0.5 ).anima_delay(-0.1) )

Now we don't need to worry about the length of the text as the button is always animated 0.1 second before the previous animation completes!

note

If we have a look at the anima_delay documentation, we can see that we can also pass a negative number to anticipate the start of a sequential or parallel animation.