> For the complete documentation index, see [llms.txt](https://docs.responsiveads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interactions-and-triggers.md).

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