Interactions

Interactions let elements respond to what a visitor does — a click, a hover, scrolling a section into view — by doing something visible in return: showing or hiding another element, switching to a different look, jumping to a section, or opening a link. You wire these up visually, without writing code.

Triggers and actions

Every interaction is a trigger wired to an action:

• Triggers — what starts it. Click, double-click, hover, mouse leave, focus, blur, key press, scroll, page load, an element scrolling into view, or an element scrolling out of view.
• Actions — what happens. Set, remove, or toggle a state on an element; switch a component to a different variant; navigate to a URL; toggle a CSS class; or scroll to a section.

An element can respond to more than one trigger, and a single trigger can run more than one action.

Wiring up an interaction

Select an element and open its Behaviors section in the properties panel. Each trigger has its own row — pick a trigger, choose an action for it, and configure the details (which element it affects, which state, which URL, and so on). Remove a row to remove that behavior.

Sites brought in from another tool sometimes include triggers with no direct equivalent in MATRIZ. Those show up read-only so you can see what they were doing; re-create the same effect with the options above and they’ll behave identically once published.

Seeing the connections

Because a trigger and its action can live on two different elements — click one thing, and another shows or hides — it helps to see the wiring rather than reconstruct it in your head. MATRIZ overlays the connections as lines directly on the canvas, so you can tell at a glance what’s wired to what.

For a page-wide view, open the Graph — a node-graph of every element involved in an interaction on the page, laid out by which triggers feed into which targets. From there you can draw a new connection by dragging from one element to another, or click a connection to inspect or delete it.

The Motion panel (in the left sidebar) lists every animation, transition, and interaction across your open pages in one place, and is another way to jump straight to the Graph.

Switching between states

Many interactions work by switching an element between states you’ve already defined — the same states used for hover and focus, but triggered by an action instead of the mouse. A card that flips between a “collapsed” and an “expanded” look, for example, is one custom state per look, switched by a click.

Components with variants (see Components) can be switched the same way: an action that switches a component to a different variant applies that variant’s whole look in one step, rather than toggling individual properties.