SR7 Editor — Action Mode & Scenes

This guide covers how to add click and hover interactions to a slide in the SR7 editor using Action Mode and Scenes.

Action Mode Basics

Action Mode is one of the three editor modes and is where interactivity is added to a slide's content.

• The Action tab lists every action on the current slide, grouped by action type.
• The slide switcher at the top moves between slides; a number badge next to each slide shows how many actions it has.
• Each action is listed in the format: interaction type → action type → target layer.
• Clicking an action opens its settings (e.g. a "simple link" action shows/edits its target URL).
• Layers that trigger an action are highlighted on the stage with a pink bounding box.

Creating a New Action

Click Add New Action to open the action modal, where you configure:

• Action type (see list below).

• Trigger — Click, Hover In (enter), or Hover Out (leave).

• Trigger layer(s) — chosen from a list of layers on the slide.

• Action-specific settings depending on the type selected.

Available action types include:

• Simple link actions (navigate to a URL).
• Slide-based actions — jump to a specific slide, or pause autoplay.
• Scene actions — trigger a transition to a specific animation scene (see below).

Scenes

Scenes are animation steps triggered by actions (e.g. a button click), and go hand-in-hand with Action Mode.

• Every module ships with two default scenes: In Animation and Out Animation.

• Custom scenes are created via Add New Scene in the scene switcher.

• When creating a scene you can:
• Give it a clear, descriptive name (recommended).
• Choose which existing layers the scene affects.
• Decide whether it behaves as a standalone animation step, or simply re-triggers the layers' existing In/Out animations (useful for just showing/hiding layers on interaction).

Worked Example — Toggle Button (Move Right / Move to Center)

Example setup: a hero slide with a floating image element hovering over a large text layer and a call-to-action button.

• Clicking the button moves the image to the right, revealing the text behind it.
• Clicking again moves the image back to its starting position.

How it's built:

1. In Animation Mode, the layer's In Animation plays first when the slide appears (previewed with Play or the spacebar).
2. A layer with extra scene animations shows small scene-shortcut markers after its in-animation keyframes — clicking one jumps straight to that scene.
3. The "Move Right" scene selects the image layer and animates its X position (position values are always relative to the layer's original placement from Design Mode — in this example, from 0 to 600px).
4. The "Move to Center" scene simply reverses that layer back to its original X position.
5. Each scene has its own scene settings, including renaming it and choosing which scene to animate from during preview (defaults to "from last scene," but setting it explicitly gives more predictable previews).
6. Back in Action Mode, the button layer has a single Toggle Scenes action: on click, it alternates the target layer between the "Move Right" and "Move to Center" scenes.

Key Takeaways

• Actions (in Action Mode) are the triggers; Scenes (in Animation Mode) are the resulting animations.
• Scene position/transform values are always relative to the layer's original Design Mode placement.
• Use descriptive scene names and explicit "animate from" settings to keep interactive previews predictable.

Updated on: 03/09/2026