Object States allow you to assign various “states” to an asset on the canvas. You can determine how you'd like the asset to look by default but then change its appearance or position when interacted with. For example, if you want a button to change colors when a user is hovering over it, you'll want to give that button a Hover State.
Assigning a new Object State to an asset could include changing its:
Opacity
Size
Image effects (brightness, hue, saturation, etc.)
What can Object States be applied to?
Object States can be applied to any asset on the canvas in Studio, including:
How to add an Object State:
Select the asset that you’d like to assign a new Object State
Navigate to the Design tab and click the plus sign next to States.
Default is the default state of the object. This will dictate how the object looks on the canvas without any user interaction.
In the dropdown menu, you’ll see options for “Hover”, “Click”, or “Add New State.”
Hover: How the asset will appear when hovered over
Click: How the asset will appear when clicked on
Add New State - This enables you to apply multiple states to the asset that you can then target from a different object or hotspot. Instead of being labeled as “Hover” or “Click”, these are generally labeled as State 1, State 2, etc. Since they are not triggered by hover or click interactions by default, you are also free to trigger these using "On View" interactions. These states can then be triggered by “On Click/On Hover/On View -> Change Target State” interactions.
Note: If you’d like to layer additional interactions on an object (for example, a CTA that changes color on hover and then links to an external site on click), you can either apply multiple interactions directly to the object/group or use a hotspot over the element to add the additional interactions. Just ensure that if you choose to use a hotspot, it also targets your Object States, otherwise, it would cover up your ability to activate the state.
How to change an Object State with interactions:
Object States can be changed via "Change Target State" interactions in Studio. These interactions can be triggered by clicking, hovering, or viewing. You can apply the "Change Target State" interactions to Hotspots, other assets on the canvas, or directly to the target asset itself.
Applying "Change Target State" interactions to a Hotspot:
The main benefit of applying a "Change Target State" interaction to a Hotspot is that it allows more flexibility and creativity with where a user can click to change the target asset's Object State. For example, Hotspots that are placed over buttons associated with tab menus or dynamic image carousels.
To apply a "Change Target State" interaction to a Hotspot:
Select the Hotspot
Under the "Interact" tab, click the plus icon next to "Interaction"
Select the type of interaction you want to add under "Trigger on"
For example, if you want to change the asset's state to a Hover State, then choose an "On Hover" interaction
Select Action > Visibility > Change target state
Under "Select object," choose the desired asset
Under "Select state," choose the asset's desired Object State
Click "Save Interaction"
Applying "Change Target State" interactions to other assets on the canvas:
The process and benefits of applying "Change Target State" interactions to other assets on the canvas are the same as with Hotspots (see above instructions). What makes Hotspots more efficient is they allow for a larger surface area that can be clicked, and they can be placed anyway on the canvas.
Applying "Change Target State" interactions to the target asset:
While applying "Change Target State" interactions to Hotspots is favorable, you can still apply them directly to the target state if desired. To do so:
Select the target asset
Under the "Interact" tab, click the plus icon next to "Interaction"
Select the type of interaction you want to add under "Trigger on"
Select Action > Visibility > Change target state
Under "Select object," choose the target asset
Under "Select state," choose the target asset's desired Object State
Click "Save Interaction"
Object States are fundamental to creating engaging and premium content within Studio. This article has touched on the basics of how to create and trigger Object States, but there is so much more you can do with them. Watch this video walkthrough of an advanced usage of multiple Object States working together to learn more. Or, check out this incredible design by our community member, Carrie Brausch, to get inspired on how to push Object States to the next level.