The Bring to Front interaction gives you a quick way to pull a layer to the topmost position in a “stack” of layers on the canvas. Using On Click, On Hover, or On View triggers, you can arrange a layer to be brought to the front of the surrounding layers—this can solve for unwanted overlap of layers. It’s an especially helpful interaction when working with Object States.
Example
The example below has an “On Click > Bring to Front” interaction applied. This interaction ensures that the image is being pulled to the highest layer so that when expanded, it does not get hidden or overlapped by the images surrounding it.
As you can see in the interactive module below, we apply our interaction states to the image (which automatically generates an On Click/On Hover > Change target state action), and then another interaction to each image, On Click > Bring to Front.
Things to note:
This interaction can be triggered by On Click, On Hover, or On View interactions. On Click > Bring to Front has a sister interaction called Reset Position(s) that enables you to send a layer back to its original position in the layer stack—more on this below.
This interaction can be added to individual layers, groups, or layers within groups.
If applied to layers or groups, the targeted layer or group will be pulled to the topmost position on the canvas.
If applied to layers within groups, the layer will be pulled to the topmost position within the group itself.
The Bring to Front interaction is self-targeting — the interaction can only target the layer or group itself.
Reset Position(s)
The Reset Position(s) interaction is the opposite of Bring to Front. It will move a layer or group from the topmost position back to its original z-position. Unlike Bring to Front, this interaction is not self-targeting — it can be used to reset the position of one or more elements.
Take a look at the interactive module above. In this example, we’ve added a Click state to enlarge the image, an On Click > Bring to Front interaction to ensure each image gets pulled to the top layer, as well as an On Click > Show > arrow_icon.svg interaction to reveal an arrow in the top corner.
On the arrow, we’ve applied an On Click > Reset Position(s) interaction that targets each image, and we made sure to check the box to return each asset to its Default State.
Here’s what that looks like in the Studio:
Incorporating a Bring to Front interaction can change the way you work with Object States in the Studio.