Introduction to Godot’s AnimationPlayer

Learn how to create animations in Godot using the AnimationPlayer node. Animate sprites, orchestrate movements, and add sound effects for exciting gameplay. Dive into the Animation panel, understand keyframes, and master various track types. From simple motions to complex cutout animations, explore the possibilities and enhance your game development skills. By Eric Van de Kerckhove.

Leave a rating/review
Download materials
Save for later
You are currently viewing page 2 of 4 of this article. Click here to view the first page.

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:

Animation tools

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.

Disable rotation mask

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.

Rec button

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.

Line between 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.

Move title up

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

Line 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.

Play animation

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.

Modulate key

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.

Modulate track

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.

Modulate line

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.

Fading line

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.

Animation fade working

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

Nothing 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.

Autoplay button

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.

Title animation done

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.

Animation controls

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.

Animation controls

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.


Eric Van de Kerckhove

Author and Team Lead

Adriana Kutenko


Over 300 content creators. Join our team.