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, as well as rename, duplicate or delete them. Interactions are independent of each other.
Trigger
The trigger is an impulse that executes the interaction.
Type:
- On load — when a shared project is loaded
- On click — when clicking on the selected object
- Mouse enter — when mouse cursor enters the selected object
- Mouse exit — when the mouse cursor leaves the object area
Target:
- Anywhere — by clicking on any Object or clicking on the Background
- Background — by 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 a selected Animation (created in Animate mode).
Control:
- Play — animation starts from the beginning or from a pause
- Pause — animation is paused in 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 — set up interaction with .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 states:
Object — the object to be transformed.
To: select the state the object will transition to.
- 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
Transform (transformation state)
1. Create a new transformation state by clicking on + icon next to the dropdown.
2. Set the transformation parameters for the state: position, rotation, and scale.
3. If desired, set Target, which is the object to which your transforming object will move.
- Object — object is not selected
- World — moves to the position that you set
- Trigger — moves to an object that is a trigger in the interaction and will follow it even if it is in motion
- [Any object]
Ease type
Interpolation type (smoothness) between current and new transformation.
- Constant — the state changes instantly, but with a consideration of duration and delay.
- Linear — transition has no acceleration. It starts and stops instantly.
- Ease auto — achieves the smoothest transition. The motion is computed automatically between multiple states.
- Ease in & out — deceleration at the beginning of transformation and at the end. Smooth movement between the two states.
- Ease in — transition starts slowly and stops instantly.
- Ease out — transition 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
ANDconditions are added to the condition list in the properties panel
OR conditions
- only one of the conditions needs to be valid
ORconditions are added in the condition popup
Conditions for Animation
The Animation condition checks the status of the desired animation:
- Stopped — animation is stopped (in the base state) ≠ Stopped — animation is not stopped (can be playing, paused, or finished)
- Finished — animation finished playing and remains static at the end ≠ Finished — animation is not finished (can be playing, paused, or stopped)
- Paused — animation is paused ≠ Paused — animation is not paused (can be playing, stopped, or finished)
- Playing — animations is playing ≠ Playing — animation is not playing (can be paused, stopped, or finished)
Conditions for Visibility
The Visibility condition checks the visibility status of the desired object:
- Shown — object is shown
- Hidden — object is hidden
Conditions for 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)
Conditions for 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
Conditions for 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. This means that the action or condition will be applied to an object that was previously defined as a trigger. Self can be handy in some cases. This reduces the number of interactions and simplifies the workflow.
