> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_12rnt8k.png =900x940)


## Creating a New Action
Click **Add New Action** to open the action modal, where you configure:
* **Action type** (see list below).

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1175f2o.png =600x417)
![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_sljpj7.png =600x424)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_12pb6ql.png =600x437)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_rki2hv.png =600x447)
![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_ik8pqp.png =600x489)


* 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).

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1aheqvc.png =600x424)


## 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**.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1rf9ln.png =900x435)

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1lz2ifm.png =600x419)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_roqemd.png =600x346)

* 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.