【Godot】Smooth Animations with Tween

Overview

In games, objects that move smoothly feel much more natural and pleasant than those that teleport instantly. UI sliding in from off-screen, characters flashing when damaged, HP bars gradually decreasing—implementing these "value changes over time" is easy with Godot's Tween feature.

Previously existing as a Tween node, Godot 4 now lets you create animations more conveniently through code by calling the create_tween() method.

Tween Basics: Animating Properties Over Time

The basic concept of Tween is "change a property of an object to a target value over a specified duration." You can schedule this in just one line of code.

func _ready():
    # Create a new Tween
    var tween = create_tween()

    # Over 1 second, change $Sprite2D's position property to Vector2(500, 300)
    tween.tween_property($Sprite2D, "position", Vector2(500, 300), 1.0)

Tweens created with create_tween() automatically end and are freed from memory when scheduled animations complete, making management very easy.

The Power of tween_property

tween_property is Tween's core method. The basic arguments are:

tween.tween_property(object, property, final_val, duration)

• object: The node to animate
• property: Property name to change (string). Sub-properties like "position:y" can also be specified
• final_val: The property's final value
• duration: Animation duration (seconds)

Practical Example 1: Damage Flash (Opacity Animation)

The effect where characters flash several times when damaged can be achieved by animating the modulate property's alpha value (opacity).

func take_damage():
    # Flash 3 times
    var tween = create_tween().set_loops(3)

    # First make transparent
    tween.tween_property(self, "modulate:a", 0.0, 0.1)
    # Then restore to opaque
    tween.tween_property(self, "modulate:a", 1.0, 0.1)

Calling set_loops(3) makes the subsequent animation sequence (transparent → opaque) repeat 3 times.

Practical Example 2: UI Slide Animation

Smoothly displaying Control nodes (UI elements) from off-screen is also easy.

# Processing when opening menu
func show_menu():
    var menu = $MenuPanel
    menu.visible = true

    # Set initial position off-screen
    menu.position.x = -menu.size.x

    # Move to on-screen position with Tween
    var tween = create_tween()
    # Set easing for more natural motion
    tween.tween_property(menu, "position:x", 0, 0.5).set_trans(Tween.TRANS_QUINT).set_ease(Tween.EASE_OUT)

This example uses set_trans() and set_ease() to add easing to the animation. EASE_OUT means "fast at first, slow at the end"—very commonly used in UI animations.

Chaining and Parallel Execution

Tweens can also chain multiple animations sequentially or run them in parallel.

• Sequential: Calling tween_property consecutively executes them in order
• Parallel: Calling parallel() makes subsequent tween_property calls start simultaneously with the previous one

func complex_animation():
    var tween = create_tween()

    # 1. First move right
    tween.tween_property($Sprite2D, "position:x", 500, 1.0)
    # 2. Then move down while simultaneously rotating
    tween.parallel().tween_property($Sprite2D, "position:y", 300, 1.0)
    tween.parallel().tween_property($Sprite2D, "rotation_degrees", 90, 1.0)
    # 3. Wait 0.5 seconds
    tween.tween_interval(0.5)
    # 4. Then fade out (make transparent)
    tween.tween_property($Sprite2D, "modulate:a", 0.0, 0.3)

Summary

Godot 4's Tween feature is a wonderful tool for easily yet powerfully implementing code-based animations. Most situations where you want smooth object movement—but not enough to warrant AnimationPlayer—can be solved with Tween.

• UI effects
• Visual effects (flashing, fade out, etc.)
• Moving platforms and mechanisms

Leveraging Tween for these elements will dramatically improve your game's quality.