Triggers

triggerseventsclickhoverkeyboardtimeractions

Triggers determine when an action fires. Every action is attached to a trigger — without one, nothing happens.

Triggers are organised into categories. Some are universal (click works on any element), while others are specific to certain contexts (drag-and-drop triggers only fire during drag interactions).

Mouse Triggers

The most common triggers. These respond to mouse and pointer interactions.

Click

Fires when the user clicks or taps the element. This is the default trigger for most actions and the one you'll use most often.

Double-Click

Fires when the user double-clicks the element. Useful for "confirm" interactions or accessing secondary functions.

Hover (Mouse Enter)

Fires when the cursor moves over the element. Great for preview effects — show a tooltip, play a subtle sound, or apply a visual effect.

Hover Out (Mouse Leave)

Fires when the cursor leaves the element. Typically paired with Hover to reverse an effect — remove a glow, hide a tooltip, or stop an animation.

Select

Fires when an element enters the Selected state (toggled on by clicking). Useful for multi-select interfaces, quiz answer selection, or toggle buttons.

Deselect

Fires when an element leaves the Selected state (toggled off by clicking again). Pair with Select to create toggle behaviours.

Keyboard Triggers

Key Press

Fires when the user presses a specific key. You configure which key triggers the action, and can add modifier requirements:

  • Key: Any key — arrows, Enter, Space, Escape, Tab, letters, or numbers
  • Ctrl/Cmd: Require Ctrl (or Cmd on Mac) to be held
  • Alt/Option: Require Alt (or Option on Mac) to be held
  • Shift: Require Shift to be held
  • Global: When enabled, the trigger fires regardless of which element has focus. When disabled, only fires when this specific element is focused.

Common uses: arrow keys for navigation, Space for play/pause, number keys for quiz answers.

Touch / Gesture Triggers

These fire on touch devices when the user swipes across an element.

Swipe Left / Swipe Right

Fires when the user swipes horizontally across the element. Perfect for carousel-style navigation — swipe left for next, swipe right for previous.

Swipe Up / Swipe Down

Fires when the user swipes vertically across the element. Useful for revealing content or scrolling through options.

Drag & Drop Triggers

These fire during drag-and-drop interactions. See Drag and Drop for the full system.

Drag Enter Zone (Dragged Over)

Fires when a dragged item enters a drop zone. Useful for showing preview feedback before the user releases.

Drop

Fires when an item is dropped onto a zone. This is the general drop event — it fires regardless of whether the drop was "correct" or not.

Drop Correct

Fires when an item is dropped into its correct zone (as defined by the zone's accepted items list). Use this for positive feedback — play a success sound, show a green highlight.

Drop Incorrect

Fires when an item is dropped into the wrong zone. Use this for error feedback — shake the item, play an error sound, show a hint.

Lifecycle Triggers

These respond to element and scene state changes.

Activation

Fires when the element becomes visible — typically because the user switched to a scene containing this element. This is the go-to trigger for "on scene load" behaviours: auto-playing background music, starting timers, showing welcome animations.

Deactivation

Fires when the element becomes hidden or the scene becomes inactive. Useful for cleanup — stop sounds, reset variables, hide layers.

State Change

Fires whenever the element's state changes (e.g. from Default to Hover, or from Default to a custom state). Useful for triggering secondary effects when an element transitions between states.

Animation End

Fires when an element's animation completes. Useful for chaining visual sequences — when a move animation finishes, start the next one.

Media Triggers

Sound End

Fires when an audio element finishes playing. Perfect for sequential audio — when one track ends, start the next. Also useful for advancing a presentation after narration completes.

Video End

Fires when a scene's background video finishes playing. Use this to automatically advance to the next scene when an intro video completes.

Data Triggers

Variable Change

Fires when a specific variable's value changes. You configure which variable to watch. This is powerful for reactive behaviour — when $score reaches 10, show the results layer; when $lives hits 0, switch to the game-over scene.

Timer

Fires at a regular interval. Configure:

  • Interval: How often it fires (in milliseconds) — e.g. every 1000ms for a once-per-second tick
  • Initial delay: How long to wait before the first fire
  • Repeat count: Fire exactly N times, then stop
  • Repeat while: Keep firing while a condition is true (e.g. $gameRunning == true)
  • On stop action: An action to execute when the timer stops

Timers are essential for countdowns, game loops, and timed events. See Background Triggers for patterns.

Breakout Triggers

These fire in response to breakout zone events. See Breakout Action for the full system.

Breakouts Activated

Fires when breakout mode is enabled for the Ripple. Use this to show instructions, start timers, or update UI.

Breakouts Deactivated

Fires when breakout mode is disabled. Use this for cleanup — hide zone indicators, stop timers, reset state.

Zone Enter

Fires when the local participant enters a breakout zone. Use this for zone-specific welcomes, sounds, or UI changes.

Zone Leave

Fires when the local participant leaves a breakout zone. Use this to reset zone-specific UI or stop zone audio.

Lock Triggers

These fire in response to room locking events.

Ripple Locked

Fires when the Ripple becomes locked. Use this to update visual indicators or show a "room locked" message.

Ripple Unlocked

Fires when the Ripple becomes unlocked. Use this to hide lock indicators or welcome new arrivals.

Visitor Knocking

Fires when a visitor knocks on a locked Ripple. Use this to play a knock sound or show a notification to the host.

Visitor Admitted

Fires when a visitor is admitted to the Ripple. Use this for welcome effects or to update a visitor counter.

Visitor Denied

Fires when a visitor is denied entry. Use this for internal logging or to update host-facing UI.

Choosing the Right Trigger

Goal Recommended Trigger
Button click Click
Hover feedback Hover + Hover Out (paired)
Auto-play on scene load Activation
Keyboard shortcut Key Press (global)
Mobile navigation Swipe Left / Swipe Right
Quiz feedback Drop Correct / Drop Incorrect
Countdown timer Timer
React to score changes Variable Change
Breakout zone welcome Zone Enter

What's Next?