Background Triggers

timerbackgroundautomationvariable-changeactivation

Not every action needs a click or hover. Sometimes you want things to happen automatically — a countdown timer, an automatic scene change when a score threshold is reached, or a sound that plays when participants enter a scene. That's what background triggers are for.

Background triggers can be attached to any element. A shape, an image, a drop, an audio element — any of them can carry timer, variable-change, or activation triggers alongside their normal click and hover actions.

Key Background Triggers

Timer Trigger

The timer trigger fires at a regular interval. It's the heartbeat of any time-based interaction.

Configuration:

  • Interval: How often it fires (in milliseconds). 1000ms = once per second.
  • Initial delay: Wait before the first fire. Useful for giving participants time to orient before a countdown starts.
  • Repeat count: Fire exactly N times, then stop. A 10-second countdown fires 10 times at 1000ms intervals.
  • Repeat while: Keep firing as long as a condition is true. The timer stops automatically when the condition becomes false.
  • On stop action: An action that fires when the timer stops (either by reaching its repeat count or when the repeat-while condition becomes false).

Example — 30-second countdown:

  1. Select any element (e.g., a text shape that displays the time)
  2. Add a Set Variable action with a Timer trigger
  3. Set interval to 1000ms, repeat count to 30
  4. Operation: subtract 1 from $timeRemaining (which starts at 30)
  5. On stop: switch to "Time's Up" scene

Variable Change Trigger

Fires when a specific variable's value changes. This is the reactive programming model — "when this data changes, do something."

Configuration:

  • Watch variable: The variable name to monitor

Example — score threshold:

  1. Select any element on the scene
  2. Add a Scene Switch action with a Variable Change trigger
  3. Set watch variable to $score
  4. Add condition: $score >= 10
  5. When the score reaches 10, automatically switch to the results scene

Activation Trigger

Fires when the element becomes visible — typically when the scene containing it loads. This effectively means "when this scene starts."

Example — auto-play background music:

  1. Add an audio element with your background music
  2. Add a Sound action with an Activation trigger
  3. Set operation to Play, enable Loop, set volume to 0.3

Common Patterns

Countdown Timer

Setup: A text element to display the time, with a timer trigger attached.

  1. Create variable $timeLeft (number, default: 60)
  2. On the text element: Timer trigger, interval 1000ms, repeat while $timeLeft > 0
  3. Action: Subtract 1 from $timeLeft
  4. On stop: Scene switch to "Time's Up" scene
  5. The text element displays $timeLeft — updates reactively

Auto-Advance Slideshow

Setup: Any element on each scene carries the trigger.

  1. Add an Activation trigger with 5000ms delay to an element
  2. Action: Scene Switch to Next
  3. Set oneTimeOnly to prevent re-triggering if the scene is revisited

Each scene loads, waits 5 seconds, then advances to the next.

Score Tracker with Milestones

Setup: Attach variable-change triggers to the elements that react to each milestone.

  1. Badge image 1: Variable Change trigger watching $score, condition $score == 5
    • Action: Show "Bronze Badge" layer
  2. Badge image 2: Variable Change trigger watching $score, condition $score == 10
    • Action: Show "Silver Badge" layer + celebration (confetti)
  3. Badge image 3: Variable Change trigger watching $score, condition $score == 20
    • Action: Show "Gold Badge" layer + celebration (explosive confetti)

Game Loop

Setup: A "Start" button element carries the timer trigger.

  1. Create variable $gameRunning (boolean, default: false)
  2. Start button: on click, set $gameRunning to true
  3. Same element: Timer trigger, interval 50ms, repeat while $gameRunning == true
  4. Action chain: Update positions, check collisions, update score
  5. "Stop" button: Set $gameRunning to false (timer stops automatically)

Timed Events in Sequence

Setup: An element with an activation trigger and chained delays.

  1. Activation trigger, delay 0ms: Play intro sound
  2. Chain, delay 2000ms: Show welcome text layer
  3. Chain, delay 5000ms: Show instructions layer
  4. Chain, delay 10000ms: Start the activity timer

The activation trigger fires on scene load, then the chain plays out with precise timing.

Breakout Timer

Setup: Any element with a Breakouts Activated trigger.

  1. Breakouts Activated trigger on an element
  2. Action: Set $breakoutTimeLeft to 300 (5 minutes)
  3. Chain: Timer trigger, interval 1000ms, repeat while $breakoutTimeLeft > 0
  4. Subtract 1 from $breakoutTimeLeft each tick
  5. On stop: Disable breakouts + switch to debrief scene

Tips

  • Attach triggers to related elements: Put a countdown timer on the text element that displays it. Put an activation trigger on the audio element it plays. This keeps your Ripple organised and easy to debug.
  • Timer intervals: For smooth animations, use 50ms intervals. For countdowns, use 1000ms. For periodic checks, 500-2000ms is usually sufficient. Avoid very fast intervals (under 50ms) as they can affect performance.
  • Activation vs Timer: Use Activation for one-time scene-load actions. Use Timer for repeated actions. Don't use a Timer with repeat count of 1 — just use Activation with a delay instead.
  • Variable Change is reactive: It only fires when the value actually changes. Setting a variable to its current value does not trigger it.

What's Next?