Introduction to Godot’s AnimationPlayer

Animation Buttons

Now you’ll need add another keyframe to the Position property of the Title node. There are various ways to do this, one of which is by using the animation buttons in the toolbar that you’ll see when you select the Title node in the scene:

The first three buttons are masks for the Position, Rotation and Scale properties that you can toggle on and off. By default, both the Position and Rotation masks are enabled. Since you only want to animate the position of the title sprite, click the Rotation mask to disable it. Not doing so will result in the creation of an extra animation track for the rotation that you won’t be using.

Next, the key button will add a keyframe to the animation at the current position in the timeline while the Rec button will enable recording mode. With recording mode enabled, any changes you make to an existing property will be added as keyframes automatically. Go ahead and enable recording mode as you’ll be using it for the rest of the tutorial.

Now add a new keyframe for the current position by clicking the key button in the toolbar. With the new keyframe added, take another look at the timeline in the Animation panel. You’ll notice there’s now a line between the two keyframes.

This line means there are no changes in the value between these two keyframes.
To make the title move down from outside of the viewport, scrub the time slider back to the 0 second mark and select the Title node in the scene. Next, move it up past the boundary of the viewport by dragging it up while holding Shift or by decreasing the Y position of the Position property via the Inspector.

Because you’re in recording mode, Godot has adjusted the keyframe automatically and the line between the two keyframes is now gone.

Playing the Animation

You can now play the animation in the editor with the Play button at the top left of the Animation panel.

Looking good! The movement is working smoothly as expected and you only had to use two keyframes to make that happen.
To get the title to fade at the end of the animation, you’ll need three keyframes that modify the Modulate property of the Title node: two to keep it fully opaque and one to make it fully transparent at the end.

Start by scrubbing the time slider back to the 0 second mark. Next, add a new keyframe to the Modulate property of the Title node by clicking the key button next to the Modulate property.

In the dialog window that pops up, click Create like you did before to add the new track for the Modulate property. You should now see a new track in the Animation panel, along with a white square representing the new color keyframe.

The title sprite should stay opaque until 1.4 seconds into the animation, so add another Modulate keyframe at 1.4 seconds using the key button in the Inspector. This results in another line between keyframes as the color remains the same.

To make the sprite fade, move the time slider to the 2 second mark and change the Modulate property of the Title node to be fully transparent. You can do this by clicking the Modulate property and setting its alpha (A) to 0. Now click the key button once more to add the last keyframe. The timeline will reflect this as the line between the previous keyframe and the new one fades from white to transparent.

Unlike property nodes like position, color properties always have a thick line like this to visualize color transitions.
Now all that’s left to do is to test the animation. Press the Play button at the top left of the Animation panel to see the animation in action.

Great, but how does it like when running the project? Press F5 to run the project and see what happens.

The title is just displayed without animating. Now that’s strange, right?
This is happening because the AnimationPlayer node is set up by default not to play any animations unless being told so with a script or otherwise. Luckily, you can mark any animation to auto play with a button in the Animation panel. Back in the editor, click the A button inside the arrow at the top right of the Animation panel.

With the animation marked to play automatically, try running the project again. You’ll now see the title coming down and fading away as expected.

That finishes up the first animation! In the next section, you’ll get to know more about the Animation panel and its controls.

Closer Look at the Animation Panel

You’ve already used the most important parts of the Animation panel, but there’s more to discover. I’ll give a brief summary of the different parts.

Animation Controls

First up are the animation controls at the top. You can use these to control the animation by playing, pausing, and stopping it. They also allow you to change the position in time and create new animations.

From left to right:

• Playback buttons: Play backwards, play backwards from end, stop, play from start and play
• Animation position: Position on timeline in seconds
• Animation button: Used to create and manage animations
• Animation list dropdown: This lists all animations of the selected AnimationPlayer node
• Autoplay on Load button: Toggle to enable or disable the animation to play automatically on load
• Edit button: This holds an extensive menu to manipulate tracks and keyframes. It also allows you to scale an animation to make it faster or slower.
• Enable Onion Skinning button: This toggles the onion skinning, which allows you to see the state of a node at different times in the animation. Previous frames will appear red and future frames will appear green.
• Onion Skinning options button: Shows extra options for onion skinning
• Pin button: Enabling this prevents the Animation panel from folding

A few of the animation controls are located at the right side, next to the timeline header.

These control the timing of the animation. The numeric input controls the length of the animation in seconds, while the button next to it toggles the looping between one-shot, looping and ping-pong.

One-shot is the default and it plays the animation once and then stops. Looping plays the animation in a loop, when the time reaches the end, it jumps back to the start. Ping-pong plays the animation in a loop, but instead of jumping back to the start at the end of the animation, it plays the animation in reverse.