Actions Overview

actionstriggersconditionsinteractivityfundamentals

Actions are what make your Ripple interactive. Every clickable button, every sound effect, every scene change — it all runs through the action system.

The core idea is simple: when something happens (a trigger), do something (an action), optionally only if a condition is met.

How It Works

Every element in your Ripple can have actions attached to it. An action has three parts:

  1. Trigger — what causes the action to fire (e.g. a click, a hover, a timer)
  2. Action — what happens when it fires (e.g. play a sound, switch scene, show a layer)
  3. Condition (optional) — a rule that must be true for the action to execute

For example: "When the user clicks this button, switch to Scene 2, but only if $quizComplete is true."

Adding Actions to Elements

Select any element in the editor and open the Actions panel on the right. From there you can:

  • Choose a trigger (click, hover, activation, etc.)
  • Choose an action type (navigate, sound, scene switch, etc.)
  • Optionally set a condition

You can attach multiple actions to the same element. Each action has its own trigger, so a single button could play a sound on hover and switch scenes on click.

Action Types

Rippily supports 13 action types, grouped by purpose:

Navigation

  • Go To (Navigate) — open a URL or scroll to a location
  • Switch Scene — move to another scene
  • Apply Snapshot — apply a saved snapshot layout

Effects

  • Visual Effect — scale, glow, shake, spin, and more
  • Sound — play, pause, stop, or toggle audio
  • Change State — switch an element's visual state
  • Move Element — animate an element to a new position
  • Celebrate — trigger confetti or emoji particle effects

Visibility

  • Layer — show, hide, or toggle layer visibility

Data

  • Set Variable — modify a variable value (add, subtract, toggle, etc.)
  • Reset — restore runtime state (variables, fired actions, scene, elements, sounds)

Breakout

  • Breakout — enable, disable, or toggle breakout zones

Drag & Drop

  • Clear Drop Zone — reset or remove items from drop zones

Conditions

Any action can have a condition that gates its execution. Conditions compare a variable to a value:

  • $score > 5 — only fire if score is greater than 5
  • $quizComplete == true — only fire if the quiz is done
  • $attempts < 3 — only fire if fewer than 3 attempts

You can combine multiple conditions with && (all must be true) or || (any must be true). See Variables and Expressions for the full syntax.

Action Chaining

Actions can be chained together using the nextAction property. When one action completes, the next one starts automatically. This lets you create sequences:

  1. Play a sound effect
  2. Then switch to the next scene
  3. Then show a celebration

Each action in the chain can have its own delay, so you can time things precisely.

Delay

Every action supports a delay in milliseconds. This pauses before executing the action. Combined with chaining, delays let you orchestrate complex timed sequences — like a countdown that plays a sound, waits 2 seconds, then reveals the answer.

Fire Once

The oneTimeOnly flag ensures an action fires only once per session. After it fires the first time, it won't execute again until the page is refreshed. This is useful for:

  • Welcome messages that should only appear once
  • One-time sound effects
  • Introductory animations

Scope: Local vs Global

Actions can be local (only affects the person who triggered it) or global (affects everyone in the Ripple).

  • Local (default): The user clicks a button and only they see the result. Other participants are unaffected.
  • Global: The user clicks a button and everyone sees the result. A scene switch moves everyone to the new scene, a sound plays for everyone, a variable changes for everyone.

Some actions are always local (navigate opens a URL in your browser, visual effects are local feedback). Some are always global (breakout actions affect everyone by nature). Most give you the choice.

Global actions that could disrupt the experience (scene switch, layer visibility, state changes) require moderator or higher permissions. Actions that are safe for collaboration (variables, sounds, celebrations, element movement, clearing drop zones) can be triggered globally by any participant.

What's Next?