Getting started
Studio Navigation
Design process
Sharing and embedding
Interactions
Define triggers, conditions, and actions. Available in the Interact mode.
Interactions allow running a set of actions based on the input. Interactions are project-based and can control various behaviors in the scene. Each added Interaction consists of a Trigger, Action, and Condition (optional). Interactions can be created in the Interact mode only. It is possible to add multiple interactions to the project, rename, duplicate or delete. Interactions are independent of each other.
Trigger
The trigger is an impulse that executes the Interaction.
Type:
- On load — shared project is loaded
- On click — clicking on the selected object
- Mouse enter — mouse cursor enters the selected object
- Mouse exit — mouse cursor exits the selected object
Target:
- Anywhere — clicking on any Object or clicking on the Background
- Background — clicking on the background
- Selection — It is possible to create an arbitrary selection of objects. To create a new selection:
- create a desired selection in the canvas
- select
Add current selection. A new Selection will be automatically created and can be reused in other triggers
Action
The action is a direct order of what should be executed.
Animation
Animation action controls the behavior of selected Animation (created in Animate mode)
Control:
- Play — animation starts from the beginning
- Pause — animation is paused in the current position
- Resume — animation starts from the current position
- Stop — animation is stopped and reset to the beginning
Animation — select which of the animations the action will be activated with (tabs in Animate mode).
Visibility
Visibility action controls the visibility of objects.
Control:
- Toggle — visibility is switched between Show or Hide based on the current state
- Show — object is shown
- Hide — object is hidden
Object:
- Select any object from the drop-down list or using the eyedropper.
- Self — the object that was selected in the trigger
- Floating UI Relative to:
- If Canvas is selected, Floating UI is displayed relative to the canvas
- If any object is selected, Floating UI is displayed relative to the selected object and following the Origin point (Local gizmo location) of the selected object
Auto-hide — Floating UI is hidden if clicked outside of the Floating UI area
Variants
Variants action control Variants object.
Variants — select the desired Variants element. Object:
- Next object — next object in the selected Variants is activated
- Previous object — previous object in the selected Variants is activated
- None — no object in the selected Variants is activated
- “Object name” — specific object in the selected Variants is activated
Materials
Materials action control which Material is selected for the specific object.
Object — select the object whose material you want to switch.
Material:
- Next material — next material of the selected object is activated
- Previous material — previous material of the selected object is activated
- “Material name” — specific material of the selected object is activated
Transformation
Transformation action controls object transition between 2 positions:
- To → selected object is transitioned to this transformation
- Base → Object is transitioned (reset) to its own base (original) transformation set in the Design mode.
- “Transformation name” → Object is transitioned to the predefined transformation state
Transformation state:
A predefined transformation that consists of a target object and offset relative to the target object. The transformation state can be renamed, duplicated, or deleted.
A new transformation state is created by clicking on the “plus” icon next to the dropdown.
If one of the transformation states is selected in the dropdown, the Transformation state editor is displayed below the dropdown:
- Target → target object is selected
- Offset → position, rotation, and scale settings are displayed
Ease type
Interpolation type (smoothness) between current and new transformation
- Constant — the state changes instantly, but with a consideration of duration and delay.
- Linear — transformation has no acceleration. It starts and stops instantly.
- Ease auto — achieves the smoothest transformation. The motion is computed automatically between multiple states.
- Ease in & out — achieves smooth motion between two states.
- Ease in — transformation starts slowly and stops instantly.
- Ease out — transformation starts immediately and stops slowly
Duration
Length of the transition between current and new transformation
Delay
Each Action can have a delay. Setting a delay means, that action is not executed immediately but will wait until the selected delay is reached.
Conditions
Conditions are rules that block a list of actions in the interaction from being executed. It is not mandatory to use conditions, but they can be very handy in some use cases:
- “and” conditions
- all conditions need to be valid
- “and” conditions are added to the condition list in the properties panel
- “or” conditions
- only one of the conditions needs to be valid
- “or” conditions are added in the condition popup
Animation
The Animation condition checks the status of the desired animation:
- Active → animation is playing, paused, or finished playing (is stopped at the end)
- Inactive → animation is not playing or finished
- Finished → animation reached the end and stopped
- Paused → animation is paused
- Playing → animations is playing
Visibility
The Visibility condition checks the visibility status of the desired object:
- Shown → object is shown
- Hidden → object is hidden
Variants
The Variants condition checks the status of specific objects in specific Variants:
- Active → object in the specific Variants is active (shown)
- Inactive → object in the specific Variants is inactive (hidden)
Materials
The Materials condition checks the status of specific material in a specific object:
- Active → material is active (applied) on the object
- Inactive → material is inactive (not applied) on the object
Transformation
The Transformation condition checks the status of the specific Transformation state:
- Active → transition to the specific transformation state is either in progress or is finished
- Inactive → transition to the specific transformation state is not in progress and not finished
- Finished → Transformation state is reached (no transition is in progress)
- Playing → transitioning to the new transformation state
Tips
Object pipette
To select objects more easily, use the “object pipette” tool. Click on the icon to activate it and then click on the object in the canvas. Object pipette is available next to multiple dropdowns.
Self
In some cases, there is a Self option available in the object selection dropdown. Self can be handy in some cases. It reacts to the specific trigger object and can reduce the number of Interactions and simplify the workflow.
