Interactions
An interaction connects an event to one or more actions. For example, clicking a button can show another element or toggle a CSS class. The event is the trigger, and each action has a target: the element it affects.
Adding an Interaction
Under Settings > Interactions, add an interaction, choose its trigger/target, then Add Action and configure each action/target. Save and test in preview; canvas clicks normally select elements.
Trigger
The trigger determines when the interaction runs.
Click
Runs when the visitor clicks the trigger target.
Mouse Enter
Runs when the pointer enters the trigger target.
Mouse Leave
Runs when the pointer leaves the trigger target.
Scroll Into View
Runs when the trigger target scrolls into view.
Key Up
Runs when a key is released. Keyboard triggers depend on focus.
- Key — The key that triggers the interaction.
- CTRL / Shift — Modifier keys required with the chosen key.
Key Down
Runs when a key is pressed. Keyboard triggers depend on focus.
- Key — The key that triggers the interaction.
- CTRL / Shift — Modifier keys required with the chosen key.
Page Loaded
Runs when the page loads. This is a page event with no trigger Target.
Page Scrolled
Runs when the page is scrolled. This is a page event with no trigger Target.
Target
The trigger target determines where to listen for the event. Choose This Element or CSS Selector. Selector Match offers Everywhere, Only Children Of This Element, or Closest Parent (CSS closest matching). Use .class or #id; targets must exist.
Actions
Actions define what happens when the trigger fires, such as showing an element, changing a class, or scrolling to another part of the page. Use Add Action to add one or more actions, then configure each action and its target.
Actions are listed in order, but delays do not make later actions wait. Remove one action to retain the rest, or remove the interaction and all its actions.
Show Element
Shows the target element.
An element excluded by Conditions has no HTML for Show Element to reveal.
Hide Element
Hides the target element.
Add Class
Adds a CSS class to the target.
- CSS Class — The class name to add.
Class actions assign names without creating CSS.
Remove Class
Removes a CSS class from the target.
- CSS Class — The class name to remove.
Class actions assign names without creating CSS.
Toggle Class
Adds a CSS class if it is absent and removes it if it is present.
- CSS Class — The class name to toggle.
Class actions assign names without creating CSS.
Set Variable
Sets a CSS custom property on the target, affecting runtime custom-property inheritance.
- Variable Name — The CSS custom property to set.
- Variable Value — The value to assign.
Use Override Variables for persistent configuration.
Set Attribute
Sets an HTML attribute on the target.
- Attribute Name — The attribute to set.
- Attribute Value — The value to assign.
Remove Attribute
Removes an HTML attribute from the target.
- Attribute Name — The attribute to remove.
Scroll To
Scrolls to the target element.
- Scroll Offset — Adjusts the destination.
- Scroll Delay — Postpones scrolling, in ms or s.
Focus
Moves keyboard focus to a target that can receive focus.
Blur
Removes keyboard focus from the target.
JavaScript Function
Calls a JavaScript function available on the page.
- JS Function Name — The existing function name to call.
Action Target
Choose This Element, CSS Selector, or Target (the element where the trigger fired). Selector Match adds Children of Target to Everywhere, Only Children Of This Element, and Closest Parent.
Advanced
Open an action’s Advanced popout to control when it can run. Each action has independent settings.
- Run Only Once — Limits the action to once per page load.
- Disable At — Disables the action at the selected screen-width ranges. Selecting a range does not automatically include smaller widths.
