Interactions

Define triggers, conditions, and actions. Available in the Interact mode

🔒

Only available for Pro and Custom plans

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:

Object

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:

select the desired objects on the canvas or left panel
click on the plus icon

Learn more about Selections

Floating UI

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)

Parent — whole Floating UI

Action

The action is a direct order of what should be executed.

Animated Texture

Action Animated Textures provides control over the playback of GIFs and Lotties.

Control:

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 GIF or Lottie from your project

Repeat — texture animation is played indefinitely

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)

Cameras

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

Download image

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

Highlight

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

Learn more about Selections

Stroke — highlighting an object by stroke

Fill — entire object is highlighted

Opacity — opacity of the Stroke or Fill

Weight — stroke thickness

Interactions

The Interactions action gives you control over other interactions.

Control:

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

Materials action control which material is selected for the specific object.

Object — select the object whose material you want to switch.

Learn more about Selections

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

Open Link

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 Variants and Materials will automatically be added to the URL as parameters.

Example:

Add Variants or Materials in Floating UI
Add interaction with the Open Link action

Result:

- 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.:

https://www.vectary.com/?Variants=Sphere&Box=Alvin Where Variants = Sphere means that a Sphere object was selected in Variants, and Box = Alvin means that a material named Alvin was chosen for the Box object.

Open in new tab — the link can be opened in the current or a new browser tab

Sounds

The Sounds action allows you to control the playback of audio files.

Control:

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 (.mp3 .wav .ogg .webm)

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

Activation by hover is only possible after any click on the scene. Activation by scene load is blocked due to browser limitations: https://developer.chrome.com/blog/autoplay/

Volume - adjust the volume

Repeat - repeat the audio file after finishing

Transformation

Transformation action controls object transition between 2 states.

Object — the object to be transformed

Learn more about Selections

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]

💡

Transformation state can be renamed, duplicated, or deleted

💡

Transformation states can be reused in other actions. This means that editing or deleting will affect all instances

Ease type

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

Upload image

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

Any other texture and material settings will remain the same

♻️

Any changes made will be temporary, returning to their default state when the project is reloaded

Variants

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

Visibility action controls the visibility of any objects in the project including Floating UI.

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
.

Learn more about Selections

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

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

Conditions for Animated texture

The ‘Animated texture’ condition checks the status of the desired GIF and Lottie:

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)

Breakpoint 🔥

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:

🖥️

Mobile: ≤ 767 Tablet: ≥ 768 and ≤ 1023 Desktop: ≥ 1024

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

Tips

Selections

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

⚠️

It is not possible to create a new selection if no objects are selected

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
choose Create new selection
enter a name and click Create

🖊️

A selection can be renamed at any time from the drop-down list

♻️

Create a selection once and reuse it for other settings

🗑️

Unused selections will be automatically deleted when you exit the project

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.