# Interactions & Triggers

Triggers define **what happens** in your ad when a user interacts, a media state changes, or the ad/page hits a condition.\
Use them to show/hide UI, navigate carousels, control video/audio, fire analytics, and more.

***

### Where to find triggers in the UI

You’ll see trigger groups in the **Setup** panel:

* **Element Triggers** (appear for every element)
  * **Click action**
  * **Mouse in/out action**
  * **Mouse in action**
  * **Mouse out action**
* **Media Triggers** (appear when the selected creative includes media)
  * **Video** (Custom Video HTML, Vimeo, YouTube):
    * *Video playing action*, *Video paused action*, *Video ended action*,\
      \&#xNAN;*Video time reached action*, *Video muted action*, *Video unmuted action*,\
      \&#xNAN;*Unable to autoplay: action*, *Preview video started action*, *Preview video ended action*
  * **Audio**:
    * *Sound playing action*, *Sound paused action*, *Sound ended action*
* **Other Triggers**
  * **Ad load action** (fires once when the ad loads)
  * **Component events** (e.g., *Playin Widget → Puzzle complete/incomplete*)

Each trigger reveals an **Action picker** with the options below.

***

### Actions (what a trigger can do) and how to set them up

#### 1) Show or hide an element

Reveal or conceal any element (including groups, posters, controls).

**Controls**

* **Target**: *Select an element* (dropdown)
* **Mode**: **Show** | **Hide** | **Toggle**
* **Options** (where shown):\
  \&#xNAN;*Automatically toggle for touchscreen devices* / *Disable this action for touchscreen devices*
* **Delay**: seconds (and for *Video time reached* you can switch to **%**)

***

#### 2) Micro-animation

Apply a quick motion preset to any element (great for hover/tap feedback).

**Controls**

* **Target**: *Select an element*
* **Type**:\
  \&#xNAN;*Fade In/Out*; *Slide In/Out* (Top/Right/Bottom/Left); *Zoom In/Out*; *Scale In/Out*;\
  \&#xNAN;*Rotate In/Out*, *Rotate*; *Wobble*, *Jump*, *Flash*, *Pulse*, *Shake*, *Tada*, *Heartbeat*

> Note: Micro-animations don’t preview inside the editor canvas; check the **Preview** page.

***

#### 3) Carousel navigation

Control a **Carousel** element.

**Controls**

* **Carousel**: choose the Carousel element
* **Action**:
  * **Next slide** / **Previous slide**
  * **Pause autoplay** / **Resume autoplay**
  * **Set slide** *(choose Slide ID)*
  * **Animate to slide** *(choose Slide ID)*
  * **Remove slide** *(choose Slide ID)*

***

#### 4) Open/Close formats

Control expandable formats from any trigger.

* **Open/Close Pushdown**
* **Open/Close Lightbox**
* **Open/Close Sidekick**\
  \&#xNAN;*Sidekick includes **Open direction**: Left | Center | Right*

> Notes shown in the UI summarize format requirements and deployment behavior.

***

#### 5) HTML5 Video controls (Custom Video element)

Select the **Video** element and choose:

* **Play HTML5 Video**
* **Pause HTML5 Video**
* **Restart HTML5 Video**
* **Reset & Pause HTML5 Video** (seek to start and pause)
* **Skip HTML5 Video to end**
* **Mute HTML5 Video** / **Unmute HTML5 Video**
* **Go to Full Screen HTML5 Video**

**Video state triggers** you can listen to:

* *Video playing / paused / ended*
* *Video time reached* → **When**: **Every Video Play** | **Only on Autoplay** | **First Time Play**\
  **Delay**: seconds **or** percentage of duration
* *Video muted / unmuted*
* *Unable to autoplay: action* (helpful to reveal a **Video Controls** overlay)
* *Preview video started / ended* (use with **Preview/Low Power Mode** poster image)

> **Vimeo / YouTube**: You get the same trigger group and action list, limited by each provider’s capabilities (play/pause/mute/fullscreen, etc.).

***

#### 6) Animation timeline controls

Drive your ad’s timeline animations.

* **Play Animation**
* **Pause Animation**
* **Restart Animation**
* **Seek Animation** → **Backward** | **Forward** + seconds

***

#### 7) Audio controls

Target any **Audio** element.

* **Play Audio**
* **Pause Audio**
* **Restart Audio**
* **Reset & Pause Audio**
* **Seek Audio** → **Backward** | **Forward** + seconds

**Audio state triggers**:

* *Sound playing action* / *Sound paused action* / *Sound ended action*

***

#### 8) Restart Playin Widget

Reset a **Playin Widget** (e.g., puzzle) to its initial state.

**Controls**

* **Target**: *Select Playin Widget*

**Component Events** (if a Playin Widget exists)

* **Puzzle complete action**
* **Puzzle incomplete action**\
  (Both can fire any standard action—open URL, show/hide, analytics, etc.)

***

#### 9) Set feed parameter

Write a parameter into a connected element.

**Controls**

* **Target**: *Select an element*
* **Parameter name**
* **Parameter value**

***

#### 10) Hide the ad

Remove the ad from the page.

**Controls**

* **Animation**: **Hide Instantly** | **Fade Out** | **Slide Out**

> **Hide the ad (Condé Nast)** is a specialized variant (no extra controls).

***

#### 11) Add to calendar

Create an event in the user’s calendar.

**Controls**

* **Calendar App**: *Google*, *Yahoo*, *iCalendar*, *Outlook*, *Office 365*
* **Timezone**
* **Start date / End date**
* **Event Information**: *Title* (required), *Description*, *Organizer*, *Organizer email*, *Location*

***

#### 12) Analytics & utility actions

* **Open URL** (navigate to link)
* **Custom Analytics Feed Event** — *Value*, *Additional Value*, *Additional Value 2*
* **Custom Analytics Event** — *Value*, *Additional Value*, *Additional Value 2*
* **Click-to-Call** — *Phone* (E.164 format, e.g., `+10002223333`)
* **Add Hash Mark to URL** *(availability may be limited by account/config)*

***

### Which triggers appear on which elements?

* **All elements** → Element Triggers (Click, Mouse in/out, Mouse in, Mouse out) + general actions (Show/Hide, Micro-animation, Open URL, Analytics, etc.)
* **Video elements (Custom HTML, Vimeo, YouTube)** → All **Video** triggers and video control actions
* **Audio elements** → **Sound** triggers and audio control actions
* **Carousel Widget** → Carousel navigation actions (plus general actions)
* **Playin Widget** → Component events (Puzzle complete/incomplete) + **Restart Playin Widget**
* **Hot Spot** / **Buttons** / **Images** / **SVG** / **Text Box** / **Groups** → General actions (Show/Hide, Micro-animation, Open URL, Analytics, etc.)
* **Scroll Element / App Canvas (iFrame)** → Commonly used as targets for Show/Hide and analytics

> On each element’s page in **Elements**, you’ll also find a short **Supported Triggers for This Element** section linking back here.

***

### Practical recipes

* **Show a CTA 5s into the first autoplay only**\
  \&#xNAN;*Trigger*: **Video time reached action** → **When**: *First Time Play* → **Delay**: *5s* → **Show** CTA group
* **Swap from poster to video when playback starts**\
  \&#xNAN;*Video playing action* → **Hide** *Poster Image*\
  \&#xNAN;*Video ended action* → **Show** *Poster Image*
* **Mute on hover (desktop)**\
  \&#xNAN;*Mouse in action* → **Mute HTML5 Video**\
  \&#xNAN;*Mouse out action* → **Unmute HTML5 Video**
* **Seek back/forward 10s on tap**\
  \&#xNAN;*Click action on button* → **Seek Animation** or **Seek Audio** → *Backward/Forward 10s*
* **Fire analytics when a puzzle completes**\
  \&#xNAN;*Playin Widget → Puzzle complete action* → **Custom Analytics Event** (*value*: `puzzle_complete`)

***

### Tips & troubleshooting

* If **Unable to autoplay** fires, use **Show/Hide element** to reveal a “Tap to Play” overlay or **Video Controls**.
* **Micro-animation** doesn’t preview on-canvas; use the **Preview** page.
* For **Video time reached**, use **%** when you want time-agnostic moments across varying durations.
* **Hide the ad (Condé Nast)** and **Add Hash Mark to URL** may be restricted by environment/account; if disabled, they’ll appear without additional controls.

***

### See also

* **Animation Timeline** (how to build motion that your triggers can play/pause/seek)
* Element pages under **Designing your Ad → Interface and Tools → Elements**\
  (each includes *Supported Triggers for This Element*, with links back to this page)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interactions-and-triggers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.