Interactions is our framework for creating interactive elements and animations on your websites. It’s a very flexible tool that can be used to create a variety of different dynamic components — menus, roll-out drawers, pop-ups, fade-in animations… almost any effect you can think of.
How Interactions Works
Every interaction has two parts: a trigger, and an event.
The trigger is the element on the page that users must click on, hover over, or view in order to make the event occur.
The event is a change in the styling of one or more elements on the page.
So for example, a typical interaction might have a button (the trigger) that causes a navigational menu to expand from the side of the screen (the event.)
To create an interaction on your page, you’ll take these steps:
Select the element on your page that you want to be the trigger.
Using the Interactions Panel, create a new interaction and give it a name.
Within the Interactions Panel, specify whether you want the event to occur when the user clicks on the trigger, hovers over it, or when the trigger scrolls into view.
Within the Interactions Panel, specify whether you want the trigger to turn the event on, turn it off, or toggle it on/off.
While in interaction mode, create the event by changing the styling of one or more elements on the page. (You’ll be entered into interaction mode automatically when you create your trigger; much like hover mode, any changes you make while in this mode will apply only to your event.)
Exit interaction mode.
Test out the interaction you've created by previewing it using the Interactions Panel, or by switching to Preview Mode.
Resources
For a first-time walkthrough of how to create a very simple interaction, and some useful tips, check out this overview of how interactions work.
For a more detailed, exhaustive look at the UI of the Interactions Panel, refer to this article.