Reuse a DefinitionReuse a Definition

A tween definition is a motion you can re-use on any compatible Node.

Animations are paused

Reduce Motion is on, or Animation Effects are off.
(e.g. in your accessibility settings)

Enable this demoApplies to this demo until you reload.

0.00 s0.20 s0.40 s0.60 s0.80 s

var hop := Tweens.position_2d_y()
hop.by_value = -80.0
hop.duration = 0.25
hop.ease = Out.QUAD
hop.ping_pong = true

for i in icons.size():
	Tweens.play(icons[i], hop.with_delay(i * 0.2))

Height on the definition

80 px

Stagger on each copy

0.20 s

Changes apply to the next wave. Icons in the air keep the settings they started with.

Scripting it

In a 2D scene, drag icon.svg into the viewport a few times, side by side. Attach this script to the scene’s root Node2D and run it.

hop_wave.gd

extends Node2D

func _ready() -> void:
  var hop := Tweens.position_2d_y()
  hop.by_value = -80.0
  hop.duration = 0.25
  hop.ease = Out.QUAD
  hop.ping_pong = true

  var icons := get_children()
  for i in icons.size():
    Tweens.play(icons[i], hop.with_delay(i * 0.2))

1. Define once. hop lifts a node 80 pixels and drops it back; negative y is up in Godot. by_value is relative, so each icon hops from wherever it stands.
2. Find the nodes. Every child of this node.
3. Start a copy on each. with_delay() copies hop with a new delay, so hop itself keeps none. Each start returns its own handle.

Each start snapshots its definition. Change hop later, and only the starts after that follow; tweens already playing keep their settings.

Would you like to know more?

AnatomyEvery field a definition can set.

VariationsScale or shift a copy relative to the original.

Keep reusable motion nearby

Store a shared definition in a static var in a class you can use as your animation design system (or theme), shared across your project. Treat it as read-only and use with_*() copies for individual starts.