Sharing and embedding
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.
The trigger is an impulse that executes the interaction.
- 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
- Anywhere — by clicking on any Object or clicking on the Background
- Background — by clicking on the background
Floating UI can be a trigger for interaction (the whole or individual elements of it).
Parent — select the desired Floating UI
Target — select the Floating UI element (Parent, Button, Image, Divider, Text, Container)
The action is a direct order of what should be executed.
Action Animated Textures provides control over the playback of
- Play — texture animation starts from the beginning or from a pause
- Pause — texture animation is paused in the current position
- Stop — texture animation is stopped and reset to the beginning
Animation — select a
Lottie from your project
Repeat — texture animation is played indefinitely
Animation action controls the behavior of a selected Animation (created in Animate mode).
- 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)
Action Cameras allow you to create and configure the switching between cameras.
Switch to — select the camera to be switched to
Ease type — select the type of interpolation, that is the smoothness of motion between the current view and the new view
- Constant — view changes instantly, but with a consideration of duration and delay
- Linear — motion has no acceleration - it starts and stops instantly
- Ease auto — achieves the smoothest motion
- Ease in & out — accelerates at the beginning and decelerates at the end
- Ease in — motion starts slowly and stops instantly
- Ease out — motion starts immediately and stops slowly
The Download image action allows visitors to save a screenshot from any camera.
Camera — select the camera from which the screenshot will be downloaded
Custom resolution — set the screenshot resolution
Transparent background — set a transparent background for the screenshot
The Highlight action lets you control the visibility of a stroke- or fill-effect on your highlighted object.
Control — Activate or Deactivate highlighting
Object — select the object to be highlighted
Stroke — highlighting an object by stroke
Fill — entire object is highlighted
Opacity — opacity of the
Weight — stroke thickness
The Interactions action gives you control over other interactions.
Trigger — lets you “force run” another interaction, bypassing its triggers and conditions
Toggle — toggle the Enable and Disable state for another interaction
Enable — make another interaction available (i.e. the interaction can be triggered)
Disable — makes the other interaction unavailable (i.e., the interaction cannot be triggered)
Interact. — choose which interaction to be controlled
Materials action control which material is selected for the specific object.
Object — select the object whose material you want to switch.
- 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
The Open Link action enables the usage of any object in the scene to follow a link. It lets any object in the scene to connect the chosen materials or shapes to a URL.
Link — specify a link
Append parameters — If this option is enabled, values selected by the user in
Materials will automatically be added to the URL as parameters.
- Add Variants or Materials in Floating UI
- Add interaction with the Open Link action
- user selects materials or objects,
- then clicks on any object/item that contains a link,
- user follows the specified link, but it now contains the user's choice parameters (the name of the materials and objects), e.g.:
Open in new tab — the link can be opened in the current or a new browser tab
The Sounds action allows you to control the playback of audio files.
- Play — audio file playback starts from the beginning or from a pause
- Pause — audio file playback is paused in the current position
- Stop — audio file playback is stopped and reset to the beginning
Sound — upload the audio file from your computer (
- The limit is 5MB
- Sounds can be reused several times in a project by using the drop-down list
- If the loaded sound is not used in any interaction, it is automatically purged (deleted) after reloading the project
Volume - adjust the volume
Repeat - repeat the audio file after finishing
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]
Interpolation type (smoothness) between current and new transformation.
- Constant — 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
- Ease in & out — accelerates at the beginning and decelerates at the end
- Ease in — transition starts slowly and stops instantly
- Ease out — transition starts immediately and stops slowly
The Upload Image action allows visitors to add a texture to your project.
Material — select the material in which the texture will be uploaded
Color, Opacity, Emission — select the channel, in which the image will be uploaded
Variants action control Variants object.
Variants — select the desired Variants 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
Visibility action controls the visibility of any objects in the project including Floating UI.
- Toggle — visibility is switched between Show or Hide based on the current state
- Show — object is shown
- Hide — object is hidden
- 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
- 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
Length of the transition between current and new transformation.
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 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:
- all conditions need to be valid
ANDconditions are added to the condition list in the properties panel
- only one of the conditions needs to be valid
ORconditions are added in the condition popup
Conditions for Animated texture
The ‘Animated texture’ condition checks the status of the desired
- Stopped — animation texture is stopped (in the base state) ≠ Stopped — animation texture is not stopped (can be playing, paused, or finished)
- Finished — animation texture finished playing and remains static at the end ≠ Finished — animation texture is not finished (can be playing, paused, or stopped)
- Paused — animation texture is paused ≠ Paused — animation texture is not paused (can be playing, stopped, or finished)
- Playing — animation texture is playing ≠ Playing — animation texture is not playing (can be paused, stopped, or finished)
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)
This feature allows to condition interactions based on screen size. For example, it is possible to show two different Floating UIs for mobile and desktop. We recommend the following breakpoints:
Conditions for Cameras
The ‘Cameras’ condition checks the status of the camera:
- Active — the camera is active
- Inactive — the camera is inactive
Conditions for Highlight
The ‘Highlight’ condition checks the status of the Highlight action:
- Active — the highlight is active (visible)
- Inactive — the highlight is inactive (invisible)
Conditions for Interactions
The ‘Interactions’ condition checks the status of the Interactions action:
- Enabled — interaction enabled
- Disabled — interaction disabled
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 Sounds
The ‘Sounds’ condition checks the status of the audio file:
- Stopped — audio file is stopped (in the base state) ≠ Stopped — audio file is not stopped (can be playing, paused, or finished)
- Finished — audio file finished playing and remains static at the end ≠ Finished — audio file is not finished (can be playing, paused, or stopped)
- Paused — audio file is paused ≠ Paused — audio file is not paused (can be playing, stopped, or finished)
- Playing — audio file is playing ≠ Playing — audio file is not playing (can be paused, stopped, or finished)
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
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 Visibility
The Visibility condition checks the visibility status of the desired object:
- Shown — object is shown
- Hidden — object is hidden
Selection is a virtual group of multiple objects that are independent of the object list structure. It can be used in multiple places across the Studio editor.
Two ways to create a selection:
- From any location where selections are available
- select the desired objects on the canvas or left panel
- click on the plus icon
- From the context menu by selecting 2 or more objects
- select the desired objects on the canvas or left panel
- call the context menu with the right mouse button
Create new selection
- enter a name and click
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.
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.
On this page
- Animated Texture
- Download image
- Open Link
- Upload image
- Conditions for Animated texture
- Conditions for Animation
- Breakpoint 🔥
- Conditions for Cameras
- Conditions for Highlight
- Conditions for Interactions
- Conditions for Materials
- Conditions for Sounds
- Conditions for Transformation
- Conditions for Variants
- Conditions for Visibility
- Object pipette