Click & hover interactions

Create engaging interactions triggered when visitors click or hover on site elements. Learn how to fully customize their behavior and how to tailor them for every breakpoint.

Adding triggers

To add a trigger, click Interactions in the Inspector panel. Then, from the triggers tab, click Add a Trigger. Finally, choose Click or Hover.Note: On mobile and tablet breakpoints, interactions are converted to on tap interactions.

Screenshot showing Editor X. A container is selected and the Inspector panel is open showing interaction trigger options. The cursor is placed over the Add a Trigger button and a dropdown shows options for Click and Hover

Setting up an affected element

Choose the element you’d like to add a click or hover interaction to. The element can be the same as the trigger element or it can be any other element on the canvas.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The cursor is hovering over the Affected element dropdown and the option Container (self) is selected.

Setting up an action type

From the Action type dropdown, you can choose what happens when a visitor clicks or hovers on the triggered element.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The cursor is hovering over the Apply an effect option under the Action type dropdown

Setting up an interaction’s effect

Choose which effect you’d like to apply to the target element. You can choose between the preset effects or create a new, custom effect.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The cursor is hovering over the Effect dropdown showing the various options available including Grow, Shrink, Float, Sink, Float and Grow and Skew

Using a preset effect

From the dropdown menu, you can choose between preset effects including Grow, Shrink, Float and more. Then, you can set its duration by adding start and end points. You can also choose the effect’s easing type.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The Effect dropdown is open and the cursor is placed over the Float and Grow option

Designing a custom effect

To create a custom effect, choose Custom from the Effect dropdown. Name the effect and hit Start Designing.

Navigating between initial state and effect design

From the dropdown, you can navigate between the element’s initial state—the way it will look when the page loads— and the element’s effect in order to choose which one you want to design.

A screenshot of Editor X where a container is selected. An effect has already been applied to the element. There is a menu bar near the top of the editor with a dropdown for navigating between the initial state and the effect design

Adjusting & designing the element

Under Adjust, you can edit the element’s appearance and its transform properties. You can change the element’s opacity, rotate it, and set the scale, skew, and translate values in their relevant units of measure. Depending on the type of element you select, you can also edit the fill color & opacity, border, corners, shadow, text and spacing.

A screenshot of Editor X where the Inspector panel is open showing the Adjust menu for a container that’s been selected on the canvas. In this menu there are options for editing the opacity, rotation, scale, skew and translate of the element. There are also options for editing its fill color and opacity, border, corners and shadow.

Timing the effect

When editing an effect from the floating menu, you can set its duration by adding start and end points and choosing its easing type. Click Done to complete the setup.

A screenshot of Editor X showing the timing settings for an element with an effect applied to it. The cursor is hovering over the Timing button in a horizontal menu near the top of the editor. Beside the affected element there is a panel showing the current timing of the effect with options below it to edit the start and end times, as well as the effect’s easing.

Removing and editing interactions

To remove an interaction, click on the trash icon next to the trigger’s name. If you would like to edit it, click on the name of the interaction.

A screenshot of Editor X where the Inspector panel is open. It’s displaying a list of click triggers applied to an element on the canvas. The cursor is hovering over a trash can icon beside the first trigger in the list.

Follow these steps in the editor

Open exercise template →

Add an effect to the circle container. Click on the container and then on Interactions in the Inspector panel, under Click choose Add new interaction.
Choose the affected element. From Affected element dropdown, choose Container (self).
Choose an action type. Under Action type choose Toggle an effect on and off. This means, on one click, the effect will be applied and, on the other, it will revert back to its initial state.
Add a new custom effect. From the Effects dropdown click on Custom. In the Design custom effect popup, name the effect and click Start Designing.
Adjust the container. Under Adjust in the Inspector panel, change the rotate property to -15°, scale to 90% for both x and y and translate to 50vw for x and -100px for y.
Finalize the effect setup. Finish editing the effect by clicking Done.
Preview to see the interaction in action. Click on Preview and, while in preview mode, click on the circle container. Click again to remove the effect and confirm that the setup is working as expected.

Transcript

Let’s explore how to use hover and click interactions on Editor X.

We can define hover or click Interactions on elements and between elements, meaning clicking or hovering on one element will animate another. Interactions are applied to all breakpoints, but on mobile and tablet they’ll appear as tap interactions.

Let’s dive into how it works.

First, we’ll create an interaction where an element grows and rotates on hover. We’ll select the element we want to work on, click Add a Trigger and choose Hover.

In the Inspector panel, we can see the Affected element dropdown.

The affected element is the element that will respond to the hover interaction. It can be the same element as the one that we interact with or another one. In this case, it will be the same element. Under Action type we can choose if we want to apply or remove an effect. Let’s apply one.

From the Effect dropdown we can choose from a list of preset options, but for this example we’ll create a custom one.

Elements can have multiple effects, and each effect must have a name. We’ll choose one for this effect and then hit Start Designing.

Now the editor will enter effect design mode. We’ll use the Inspector panel to control the design. Under Adjust, you’ll see options to change the opacity, rotation, scale, skew and translate settings for the element.

You’ll also find options for designing the fill color and opacity, adjusting the border, the corners and adding a shadow.

To create the rotation we want, we’ll set the rotation property. And, to make the element grow, we’ll set the scale property. Under Timing, we’ll set the duration of the transition to 0.2 seconds and set the Easing to Ease in and out for a gradual flow.

Now we’ll preview the effect by clicking Play. Once everything looks good, click Done to finish the set up.

In the hover trigger list in the Inspector panel, you’ll see that the hover interaction is now set to apply the effect we created on the element.

To check how the interaction will look when the site is live, we’ll enter Preview mode and hover over the element.

As we’ve said, interactions apply to all breakpoints. On tablet and mobile devices, hover and click interactions will automatically convert to on tap interactions. You can decide to keep, adjust or remove the interactions on each breakpoint.

Let’s see how we can disable this hover interaction on a smaller breakpoint. For this example, we’ll go to the tablet breakpoint. Then we’ll remove the interaction under Hover in the Inspector panel by clicking on the trash icon. To disable multiple interactions, just click the trash icon beside each one.

Note that if we delete an entire trigger, it will be deleted on all breakpoints.

Because of the cascading rule, since we disabled the interaction on tablet, it will also be disabled on mobile. However, it will still appear on desktop. To edit interactions on any breakpoint, just click on the interaction name.

If we want to edit the element effects, we can click the pencil icon next to the effect name in the Inspector panel.

Let’s preview again to see those changes. On desktop, the hover interaction is working, but on tablet and mobile it’s disabled.

Now we’ll move on to adding a click interaction that’ll work alongside our hover interaction. For this example, we’ll create a behavior where, when this circle element is clicked, the containers will go from being on top of each other to lining up next to each other.

First, we’ll choose the circle button, click on Add a trigger and choose Click. We’ll then choose the affected element. We’ll select the relevant container on the canvas and then click Done.

In the Action type dropdown for click interactions, we have 4 options.

Apply an effect, which will trigger the chosen effect with no option to remove it.

Toggle an effect on and off, which will trigger the chosen effect on one click and remove it on another.

The last two options are Remove a specific effect and Remove all the effects that have been triggered before. In this case we will choose Toggle an effect on and off.

Next, we’ll set up a custom effect here as well. We’ll then set the name and click Start Designing.

Now we’ve entered effect design mode once again. In this design, we want our cards to be on top of each other as the site loads. To do that, we’ll access the initial state from the dropdown. The initial state refers to the look, size and position of an element as the page loads.

Under Adjust we’ll set the container’s properties to be positioned as we want. In this case that’s in the middle, next to the middle card, to create a stacking effect. To do this, we'll set Translate to 80%. This refers to where the card will be positioned when the page loads.

Now we’ll go back to the custom effect state to make sure the properties are set up the way we want them. Since the card position is lined up and the Translate property at 0, we don’t need to change anything.

Let’s see how it looks by clicking Play. Since it looks good, let’s hit Done.

If you’d like to trigger multiple elements on click or hover, just add more interactions. Here, we’ll add one more click interaction to trigger the right card as well. Both cards will then be triggered when the circle container is clicked.

We’ll choose the affected element: the right card. We’ll then change the Action type to Toggle an effect on and off, create a custom effect, name it and start designing.

For the initial state, we want the card to be positioned close to the middle card to achieve a stacked appearance, so we’ll set Translate to -80%. For the custom effect applied to the card, we’ll keep the translation on 0 to keep the “lined-up” effect.

Let’s click Play to make sure everything looks good and then click Done.

Let’s preview to see the final result with both the hover and click interactions. On hover, the circle element grows and rotates and, on click, the cards move next to each other. On another click, the cards go back to their initial position.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.