Object States

3 Minute read

Reading Time: 3 minute

What are Object States?

Object states give you the ability to assign various “states” to an element on the canvas. So for example, you can tell Ceros that you’d like your shapes and images to look one way by default, but a different way when you hover over or click on the object. With object states, you can easily change things like location, opacity, size, rotation, image effects (brightness, hue, saturation, etc.), and color of an object when a user interacts in a certain way.

Why use Object States?

Traditionally, if you wanted an object in Ceros to transform upon a user interaction, the process would be a bit different. You’d need to copy the object, apply the visual transformation to the copy, turn off the visibility of the copy, and use an interaction to say “on hover – show – duplicate object”. Not the most straight-forward process. You can of course still follow this workflow if you’d like, but we wanted to make things a bit easier. Using Object States will eliminate the need for almost all of these steps! Keep reading to find out how object states can speed up your workflow.

Here’s how:

  1. Select the element that you’d like to transform upon a hover or click interaction. This can be a jpeg, png, svg, an in-studio shape, or a text box.
  2. Navigate to the Design tab and click the plus sign next to ‘States’.
  3. “Default” is the default state of the object. This will dictate how the object looks on the canvas without any user interaction. 
  4. In the dropdown you’ll see options for “Hover”, “Click”, or “Add New State.”
    • Hover- If you select hover from the dropdown and apply changes to the object’s attributes, this will impact what happens when a user hovers over that object. This allows you to make subtle design changes without requiring an entirely new layer.
    • Click- If you select click from the dropdown and apply changes to the object’s attributes, this will impact what happens when a user clicks on that object. Keep in mind, this state change will be applied and stay visible once a user clicks similar to how an “on-click-show” interaction currently works. 
    • Add New State- This enables you to apply multiple states to the object that you can then target from a different object or hotspot. Instead of being labeled as “Hover” or “Click”, these are labeled more generally as State 1, State 2, etc. Since they are not triggered by hover or click interactions, 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.  

Please note: if you’d like to layer additional interactions on an object (think, 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 or group, or use a hotspot over the element to add the additional interactions. Just ensure that if you choose to use a hotspot, that the hotspot also targets your object states, otherwise it would cover up your ability to activate the state. 

Wait…so when should I be using a hotspot??

While it’s perfectly acceptable to apply interactions and states directly to an object or group of objects, there are a few instances when using a hotspot could result in a better experience. And while this is by no means an exhaustive list, we’ve outlined a few of those potential cases below.

  1. You’ve always used hotspots to trigger your interactions and you feel more comfortable doing it this way. That’s totally fine! You can use hotspots to trigger the object state change and layer any additional interactions onto the hotspot as well. 
  2. You need to increase the clickable area of an object. This one you can actually achieve this in one of two ways. You can use a hotspot like we’ve outlined above to trigger both the object state and the interaction. Or, you can place the hotspot within your group (increasing the clickable area of that group) and then apply the Object State to the elements within the group, and the interaction directly to the group. Be sure to toggle “Use group as trigger”. See below for more information on Groups and Object States.
  3. You want to clearly distinguish which layers in your layers panel have interactions applied to them. Unless you rename your layers, there is no clear way to indicate from your layers panel which assets have a state or interaction applied to them. So if maintaining the ability to easily scan your layers panel to find interactions and states is a priority, we suggest you use hotspots to target both.

Was this helpful?

You already voted!
28 out of 39 people found this helpful