Up to date

This page is up to date for Godot 4.0. 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.

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

The animation panel consists of four parts:

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.

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¶

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

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.

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