Triggers
Triggers let you bind user interactions to Elements in the UI Editor, making your layouts truly interactive. Common trigger types include:
- Click — Fires when the user clicks (or taps) the node.
- Hover Enter / Leave — Fires when the cursor enters or exits the node’s bounds.
- Drag — Fires continuously while the user drags across the node.
Trigger Types
| Trigger Type | Description | Example Use Case |
|---|---|---|
| Click | Activates when the user clicks or taps the Element. | Trigger a “submit” animation on a Submit button, or toggle a menu’s visibility. |
| Click Local | Activates when the user clicks or taps the Element. While click Triggers run for the whole layout, click local runs locally for the Element. This is especially useful for Grids with multiple items. While Click would activate the entire Grid Element, Click Local will only affect a single Element within the Grid. | Select an individual cell in a photo gallery Grid. |
| Drag X | Adds horizontal dragging mode to the Element. There are three different modes: drag, scroll, and swipe. | Swipe through a carousel of product cards or pan a large horizontal timeline. |
| Drag Y | Adds vertical dragging mode to the Element. There are three different modes: drag, scroll, and swipe. | Scroll a long vertical menu or list of high scores. |
| Drag steps X | Snaps horizontal dragging to certain intervals, or steps. Must be used in conjunction with Drag X. | Snap a carousel to each horizontal panel. |
| Drag steps Y | Snaps vertical dragging to certain intervals, or steps. Must be used in conjunction with Drag Y. | Snap a vertical menu one item at a time. |
| Drag snap duration | The duration in seconds for the drag step snapping. | Give a smooth 0.3s bounce-back when you overscroll past the end of a list. |
| Drag snap easing | The easing function to use for the drag snap transition. See easings.net for detailed information about each easing option. | Add smooth snapping behavior to your carousel. |
| Hover Enter | The layout state to set when the cursor enters the element. | Highlight a menu item or show a tooltip when you hover over an icon. |
| Hover leave | The layout state to set when the cursor leaves the element. | Return the menu item to its default style or hide the tooltip on exit. |
Adding a Trigger
- Select the target node in the Hierarchy panel.
- In the Element Properties panel, scroll to the Triggers section.
- Click the ✏️ (Pencil) icon to open the Trigger dropdown.
- Select the desired Trigger.
- Set the value of the Trigger, or assign an Event that should run when this Trigger fires.
Now Toggle Play Mode from the Debug menu or by pressing the F6 key, and you will be able to perform the Trigger action which you added!