State Machine is the brain of interactive animations. While the regular Timeline plays an animation from start to finish, the State Machine lets animation think, pause, and react to the 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): state is what 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 paths between states. They tell the animation how to get from one action to the next.
• Variables (rules): variables are sensors. The system automatically tracks variables like hover and click and auto suggests them. 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 Entry node. When animation begins, it instantly travels out of the Entry node following the connected arrow. The state it points to is “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