Up to date

This page is up to date for Godot 4.1. If you still find outdated information, please open an issue.

Introduction to the animation features

The AnimationPlayer node allows you to create anything from simple to complex animations.

In this guide you learn to:

  • Work with the Animation Panel

  • Animate any property of any node

  • Create a simple animation

In Godot, you can animate anything available in the Inspector, such as Node transforms, sprites, UI elements, particles, visibility and color of materials, and so on. You can also modify values of script variables and even call functions.

Create an AnimationPlayer node

To use the animation tools we first have to create an AnimationPlayer node.

The AnimationPlayer node type is the data container for your animations. One AnimationPlayer node can hold multiple animations, which can automatically transition to one another.

The AnimationPlayer node

The AnimationPlayer node

After you create an AnimationPlayer node, click on it to open the Animation Panel at the bottom of the viewport.

The animation panel position

The animation panel position

The animation panel consists of four parts:

The animation panel

The animation panel

  • Animation controls (i.e. add, load, save, and delete animations)

  • The tracks listing

  • The timeline with keyframes

  • The timeline and track controls, where you can zoom the timeline and edit tracks, for example.

Computer animation relies on keyframes

A keyframe defines the value of a property at a point in time.

Diamond shapes represent keyframes in the timeline. A line between two keyframes indicates that the value doesn't change between them.

Keyframes in Godot

Keyframes in Godot

You set values of a node's properties and create animation keyframes for them. When the animation runs, the engine will interpolate the values between the keyframes, resulting in them gradually changing over time.

Two keyframes are all it takes to obtain a smooth motion

Two keyframes are all it takes to obtain a smooth motion

The timeline defines how long the animation will take. You can insert keyframes at various points, and change their timing.

The timeline in the animation panel

The timeline in the animation panel

Each line in the Animation Panel is an animation track that references a Normal or Transform property of a node. Each track stores a path to a node and its affected property. For example, the position track in the illustration refers to the position property of the Sprite2D node.

Example of Normal animation tracks

Example of Normal animation tracks

Tip

If you animate the wrong property, you can edit a track's path at any time by double-clicking on it and typing the new path. Play the animation using the "Play from beginning" button Play from beginning (or pressing Shift + D on keyboard) to see the changes instantly.

Tutorial: Creating a simple animation

Scene setup

For this tutorial, we'll create a Sprite node with an AnimationPlayer as its child. We will animate the sprite to move between two points on the screen.

Our scene setup

Our scene setup

Warning

AnimationPlayer inherits from Node instead of Node2D or Node3D, which means that the child nodes will not inherit the transform from the parent nodes due to a bare Node being present in the hierarchy.

Therefore, it is not recommended to add nodes that have a 2D/3D transform as a child of an AnimationPlayer node.

The sprite holds an image texture. For this tutorial, select the Sprite2D node, click Texture in the Inspector, and then click Load. Select the default Godot icon for the sprite's texture.

Adding an animation

Select the AnimationPlayer node and click the "Animation" button in the animation editor. From the list, select "New" (Add Animation) to add a new animation. Enter a name for the animation in the dialog box.

Add a new animation

Add a new animation

Manage an animation libraries

For reusability, the animation is registered in a list in the animation library resource. If you add an animation to AnimationPlayer without specifying any particular settings, the animation will be registered in the [Global] animation library that AnimationPlayer has by default.

Manage animations

Manage animations

If there are multiple animation libraries and you try to add an animation, a dialog box will appear with options.

Add a new animation with library option

Add a new animation with library option

Adding a track

To add a new track for our sprite, select it and take a look at the toolbar:

Convenience buttons

Convenience buttons

These switches and buttons allow you to add keyframes for the selected node's location, rotation, and scale. Since we are only animating the sprite's position, make sure that only the location switch is selected. The selected switches are blue.

Click on the key button to create the first keyframe. Since we don't have a track set up for the Position property yet, Godot will offer to create it for us. Click Create.

Godot will create a new track and insert our first keyframe at the beginning of the timeline:

The sprite track

The sprite track

The second keyframe

We need to set our sprite's end location and how long it will take for it to get there.

Let's say we want it to take two seconds to move between the points. By default, the animation is set to last only one second, so change the animation length to 2 in the controls on the right side of the animation panel's timeline header.

Animation length

Animation length

Now, move the sprite right, to its final position. You can use the Move tool in the toolbar or set the Position's X value in the Inspector.

Click on the timeline header near the two-second mark in the animation panel and then click the key button in the toolbar to create the second keyframe.

Run the animation

Click on the "Play from beginning" (Play from beginning) button.

Yay! Our animation runs:

The animation

The animation