Interactive animations respond to a user’s mouse or touch. By organizing your logic at the Graph level, you can coordinate multiple shapes (backgrounds, icons, text) to react simultaneously to a single trigger.

Animation Clips

In an interactive project, you don’t play one long timeline. Instead, you play Clips — named time ranges that represent specific actions.

How to create them: at the very top of the Timeline or Dope Sheet, click and drag in the empty area above the ruler. This creates a Clip block.

• Idle clip: usually a single frame where shapes are in their resting position.
• Action clip: a range of frames where shapes move, change color, or scale.

Chronological timeline

In timeline-based state machines, it is highly recommended to place your clips on the global timeline in the logical order of expansion so that un-keyed values naturally “hold”.

Because animation engine looks backwards down the timeline to find the last known keyframe, placing your clips chronologically ensures that looping states naturally inherit correct sizes and positions.

Example timeline order:

1. Idle (Frames 0-10)
2. Hover in (Frames 20-30) — Circle expands
3. Hover noise (Frames 40-50) — Circle wobbles (looping)
4. Hover out (Frames 60-70) — Circle shrinks

If Hover noise was placed before Hover in on the timeline, the circle would suddenly shrink during the noise loop.

The engine would look backwards from frame 40, miss the expanded keyframes at frame 30, and find the tiny circle from the Idle state at frame 10.

Multi-node choreography

Because Clips belong to the Graph, not the node, you can animate many things at once:

1. Select Rectangle 1 and animate its scale at Frame 10.
2. Select Text 1 and animate its opacity at Frame 10.
3. Create a Clip from Frame 0 to 10 named “Activate.”
4. When the State Machine plays “Activate”, both the rectangle and the text will animate in perfect sync.

Crossfade blending

When Wait for animation to finish on a transition is unchecked, State Machine instantly jumps to the target state the moment the condition is met.

However, if an animation is interrupted (e.g., moving the mouse away before a button fully grows), jumping straight to the start of the exit animation causes a harsh, instantaneous “snap”.

Crossfade blending solves this by automatically calculating the values of the animation you are leaving and smoothly mixing (lerping) them with the new animation over a defined number of frames.

How to use it:

1. Select any Transition Line (arrow) in the State Machine.
2. In the Properties panel, find the Crossfade (frames) input.
3. Set it to a short duration (5 to 10 frames).
4. Ensure Wait animation to finish is unchecked.

Now, transition will have smooth blend from its interrupted state into the new one, making UI feel much more responsive.

Example: Hover effect

Animation clips:

• Idle: Frame 0 (Static).
• In: Frames 1–10 (Growing).
• Out: Frames 11–20 (Shrinking).

States: Create three states: Rest, Hover In, and Hover Out.

Wiring:

• Rest ➔ Hover In: Condition (hover == "My Hitbox")
• Hover In ➔ Hover Out: Condition (hover != "My Hitbox"), Wait animation to finish: OFF, Crossfade: 7 frames
• Hover Out ➔ Rest: Wait animation to finish: ON

Interaction cheatsheet

Built-in variables track the Identity of the shape being interacted with.

• hover: Persistent. Returns the Label/ID while the mouse is over.
• click: Transient. Fires once when a click is finished.
• pointerdown: Persistent. Active as long as the mouse is held down.

See also

• Graphs as Components
• Dope sheet