Interactions is our framework for creating interactive elements and custom animations on your websites.

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 site components.

For a more detailed and comprehensive look at the Interactions Panel UI, refer to this article.
​

The steps below will walk you through the process of creating a very simple interaction.

Every interaction has at least one trigger -- the element on the page that causes the event to occur.

The first step you’ll always take is to select the element that you want to be the trigger for your interaction. In this simple example, we’ll start with two differently-colored containers on a page. The green container is going to be our trigger, so we’ll start by selecting it:

With the container selected, open the Interactions Panel by clicking the icon in your right toolbar:

Then click the "Add" button at the top of the panel to create a new interaction:

A modal dialog will pop up asking you to provide a name for this interaction. It’s a good idea to give it a name that’s descriptive, so that in cases where a page has multiple interactions, it’s easy to identify them within the panel.

In this example, we’ll call the interaction “turn yellow to red”:

As soon as you’ve confirmed this, your interaction will be created. The trigger will be the element that you had selected. You’ll see it appear within the Interaction panel:

You’ll also see that the trigger is now indicated on the stage with an orange outline, and black dropdown beneath it:

There are three types of triggers. You can specify whether the trigger should activate the event when the user clicks on it, when the user hovers their mouse over it, or when the trigger comes into view in the browser. 

By default, new interactions have their trigger set to "on click".

You can also specify whether the trigger will cause the event to turn on, turn off, or toggle on/off.
​

You'll notice that when you created your interaction, you were automatically switched into interaction mode. 

You can tell that you’re currently in interaction mode by the black bar across the top of your screen:

Any changes you make to your page while in this mode will apply only to the event (the thing you want to happen when users interact with the trigger.) In other words, your changes will not be visible until users click (or hover) on the trigger.

To create your event, just change the styling of any elements on the page: their color, position, dimensions, and so on. You can change anything on the page that you want; you aren't just limited to the trigger itself.

 In this example, we will change the color of the yellow container to red:

Once you’re satisfied with the way your event looks, you can exit interaction mode by clicking the "Exit" button at the top right of the screen.
​

It’s a good idea to check and see whether the interaction is working the way you want it to. The fastest way to do this is to enter Preview Mode, by pressing <P> on your keyboard or choosing “Preview Mode” from the “View” menu.

In this example, when we enter preview mode and click on the green container, we can see that the other container now toggles its color back and forth between yellow and red.
​