State Machine is the brain of interactive animations. While the regular Timeline plays an animation from start to finish, the State Machine lets your animation think, pause, and react to user interactions, like moving the mouse or clicking.

To use the State Machine, select a node in nodegraph and open the State Machine view in the Timeline panel.

Core concepts

• States (nodes): a state is what the object is doing right now. For example, a button might have an Idle state (doing nothing), a Hover state (growing larger), and a Click state (shrinking). Each state plays a specific Animation Clip.
• Transitions (arrows): these are the paths between states. They tell the animation how and when to get from one action to the next, and can smoothly crossfade between states if an animation is interrupted midway.
• Variables (rules): variables act as sensors. The system automatically tracks built-in variables like hover and click. If the user hovers over a shape named “Star”, the hover variable changes to “Star”. Transitions use these variables to decide if they are allowed to move to the next state.

Entry point

Every State Machine has an Entry node. When the animation begins, it instantly travels out of the Entry node following the connected arrow. The state it points to becomes your “Starting State” (usually an Idle or default resting state).

Built-in variables

State Machine automatically tracks user interactions with canvas shapes. You can use these in your transition conditions:

• hover: contains the ID or Label of the shape the mouse is currently resting on.
• click: contains the ID or Label of the shape that was just clicked.
• pointerdown: contains the ID or Label of the shape being pressed down on.
• pointerup: contains the ID or Label of the shape where a press was released.

Shortcuts

See also

• Interactive states
• Timeline overview