What is an Interaction?
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.
How Do I Create an Interaction?
The steps below will walk you through the process of creating a very simple interaction.
1. Choose a trigger
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:
2. Create the interaction
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:
3. Name the 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:
4. Set the type of trigger
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.
5. While in Interaction Mode, create your event
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:
6. Exit interaction mode
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.
7. Preview your interaction
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.
Tips for Managing Interactions
- Use the "preview" function. The Interactions Panel lets you quickly preview any event you’ve created on the page by selecting the "eye" icon:
- Use the Page Structure panel. You may want to create an interaction that reveals a hidden component. This can make it difficult to locate and select the elements involved, especially if they are hidden by default. The Page Structure panel can be invaluable for managing these kind of interactions. Giving the elements on your page informative names (like “animated drawer”, “pop-up”, etc.) makes it even easier to select and manage hidden elements.
- Use the "reset" button. If your interaction isn’t behaving the way you want and you aren’t sure why, sometimes it can be helpful to start over. Clicking the "Reset Interaction" button will reset your event, while leaving your trigger(s) intact.