The Interactions Panel is used to create, edit, and delete interactions on your website. It allows you to build custom animations and events when page elements are clicked, hovered over, or scroll into view.

If you’re just getting started with Interactions, you may want to refer to this introduction, which provides a simple summary and links to some resources that can help you quickly learn to create your own interactive components.

We'd also recommend taking a look at this step-by-step walkthrough of how to create a simple interaction.

The rest of this article provides a deep-dive into the UI of the Interactions Panel itself.

Creating a New Interaction

To create an interaction, click the "+" button at the top of the panel. You must have an element selected when you do this. The selected element will become the trigger for this interaction.

You'll be asked to provide a name for the interaction. It's a good idea to name it descriptively, so you can remain organized and easily identify which interaction is which.

When you submit, your interaction will be added to the Interactions Panel, with the selected element as the trigger. You can then begin creating the event that is activated by this trigger.

Editing Events in Interaction Mode

When you create a new interaction, or select an existing one from the Interactions Panel, you'll be placed into Interaction Mode.

While in Interaction Mode, you are editing the event that occurs when users trigger this interaction.

Any changes you make to the styling of the page exist only within this event. They will only be visible when users trigger the interaction.
An event can consist of styling changes to one or more elements on the page. You can change the color, position, size, dimensions, and so on -- pretty much anything that you can do via the right toolbar panels.
An event cannot include changes to the structure of a page. (You cannot change the relative ordering of page elements.)

You'll know when you are working in Interaction Mode by a bar that appears across the top of the screen:

Exiting Interaction Mode

To leave Interaction Mode, click the "Exit Mode" button at the right-hand side of the bar at the top of the screen.

You can also exit the mode by de-selecting the current interaction in the Interactions Panel.

Previewing an Interaction

To preview what a particular interaction looks like, toggle the "eyeball" button next to it in the Interactions Panel. This will automatically turn the event on and off, so you can see what it looks like.

Another easy way to view your interactions is to activate Preview Mode by pressing <P> on your keyboard or selecting it from the "View" menu.

Editing a Trigger

Every trigger has two parameters that define how the interaction will be triggered by your users.

Trigger Type. A trigger can be set to fire when the user clicks on the element, when they hover over it with the mouse, or when the element scrolls in view.
Trigger Effect. A trigger can cause its event to turn on, turn off, or toggle on/off.

There are two ways to set these properties. You can set them via dropdowns in the Interactions Panel:

Or, you can set them on the stage itself. When a trigger is selected, you'll see some dropdowns appear directly below the element:

Adding Additional Triggers

Any interaction can have multiple triggers. For example, you may want one trigger to turn on the event, then a different trigger to turn it off.

To add additional triggers to an interaction, first select the interaction in the Interactions Panel. Then select an element on the stage, and click the "Add Trigger" button.

The currently selected trigger will always be outlined in orange, both in the Interactions Panel and on the stage.

Each trigger will be assigned a letter, A through Z. This designation has no meaning; it's just to help you identify the different triggers on the page.

Deleting a trigger

To delete a trigger from an interaction, select it in the Interactions Panel and click the trash can button.

This will delete the selected trigger, but leave the event intact. You will be able to assign a new trigger to it.

Resetting an Interaction

The "reset interaction" button at the bottom of the panel will allow you to completely reset the event state of the currently selected interaction. It will remove all the styling from this interaction.

Any triggers assigned to the interaction will remain intact; only the event state will be reset.

Deleting an Interaction

To delete an interaction from the page, select the interaction in the Interactions Panel and click the trash can button.

You'll be asked to confirm your decision. Deleting an interaction will remove the event and all the associated triggers from the page.