And/Or Transitions

1m 07sPublished Sep 25, 2025+1 changes

SummaryVersion Notes (Draft)

This lesson explains how to leverage View Model Properties to establish Transitions Conditions, allowing designers to control precisely when a state machine switches between different timelines. By replacing blind transitions with logic-driven rules, this methodology enables animations to react dynamically to business logic and user interactions at runtime.

Core Behavioral Differences of Condition Types:
- Number: Best suited for progression bars, directional coordinate tracking, or ranged step transitions.
- Boolean: Designed for continuous dual-state tracking like dark/light modes or toggle on/off switches.
- Trigger: Fires for a split second before reverting automatically, making it ideal for transient events like clicks or splash actions.
Developer Handoff Best Practices: Utilizing View Model Properties within conditions is highly recommended over standard inputs. This architecture cleanly exposes variables to developers, allowing direct manipulation via JavaScript or other runtime SDKs with minimal integration friction.

Some content differs from current version1 changes

2024.11Advanced conditions

Alt+click for advanced options.

📌 Key Points

Multiple conditions with And (all met) or Or (any met) logic.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Binding a View Model:

Click on the Artboard's name in the top right corner to create a new View Model, which automatically binds to the current Artboard for state machine integration.
00:00:28

Configuring Property Types:

Navigate to the Data Panel and add three fundamental property types to the View Model, naming them num (Number), bull (Boolean), and trig (Trigger).
00:00:55

Simulating Property Interactions:

Press play and demonstrate how to interact with the properties—scrubbing the number up/down, toggling the boolean between true/false, and tapping the trigger to watch it momentarily fire and reset.
00:01:16

Applying Number Conditions:

Highlight a transition line, click the plus icon to add a condition, set it to trigger when num > 50, and increase the value during playback to verify the transition.
00:01:53

Testing Boolean Conditions:

Remove the previous condition, add a new one tracking the boolean property, set the rule to transition when bull is true, and toggle it to observe the immediate state change.
00:02:26

Executing Trigger Conditions:

Replace the criteria with the trig property. The state machine remains paused in the first timeline until the trigger icon is tapped, smoothly executing the end-to-end loop to the next timeline.