Triggers
Events like tap, hover, drag and scroll that play, pause, reverse, switch states or set variants.
A trigger connects an event on a layer (or the whole scene) to an action. Read it as a sentence: When tap on Pay button → Go to Loading, only in Pressed.
Add a trigger
- Select a layer on the stage.
- Click Add hover or Add tap in the Interactions tab, use the selection bar's interactions menu, or choose Stage → Add tap trigger / Add hover trigger. The + next to Triggers adds a plain trigger on the selected layer (or on the whole scene when nothing is selected).
- Adjust the trigger's menus: the event, the target, the action, the state and the gate.
| Button | Creates |
|---|---|
| Add hover | A Hover state (scale 1.03, 2 pt up, spring 0.3 s) if none exists, plus Hover → Go to Hover and Hover end → Go to Default |
| Add tap | A Pressed state (scale 0.96, spring 0.25 s) if none exists, plus Tap → Toggle Pressed |
| + next to Triggers | Tap → Go to the first state after Default, or Restart when there are no states |
Events and actions
| Event | Fires when |
|---|---|
| Tap | The target is clicked or tapped (dragging the target cancels the tap) |
| Hover | The pointer enters the target |
| Hover end | The pointer leaves |
| Press | The pointer goes down on the target |
| Release | The pointer comes up |
| Load | The scene appears (and again on restart) |
| In view | The target scrolls into view |
| Drag | The target is dragged and released past a distance. The layer follows the pointer and springs back. See Drag and scroll triggers |
| Scroll progress | Not a one-off event but a link: scrolling scrubs the timeline from start to end. The row reads “Scrolling scrubs the timeline” |
| Action | What it does |
|---|---|
| Go to | Moves to a state |
| Toggle | Moves to a state, or back to the previous state (usually Default) if it's already there |
| Play / Pause / Restart / Reverse | Controls the timeline's own playhead |
| Set variant | Switches an instance's variant, with a tween (see Animated variant switches) |
When a trigger other than Load or In view controls playback (for example Tap → Play), the timeline waits at its start until that trigger fires.
Target
The target menu offers Scene (the whole scene listens), Selection (…) for the selected layer, and the scene's layers. A Drag needs a layer: switching a scene trigger to Drag targets the selected layer.
Only in one state
Gate a trigger so it only fires in a given state: switch In any state to Only in Pressed, for example. That's how a second tap can go back, or a hover can be ignored while loading. The gate menu appears for state actions and for gated triggers.
Set a component's variant
With Set variant, a trigger switches an instance's variant, for example hover → the hover variant of a card. The target must be an instance whose component has variants; otherwise the menu says “Target an instance whose component has variants”. The switch tweens with the instance's or the variant set's transition. See Variants.
Troubleshooting
| If this happens | Try this |
|---|---|
| Hover does nothing in the preview | Check the gate: a hover Only in Default won't fire while another state is active. |
| Add hover is greyed out | Select a layer first (“Select a layer to add a hover or tap”). |
| The timeline doesn't play on its own any more | A trigger controls playback, so the timeline waits for it. Add a Load → Play trigger, or remove the playback trigger. |