---
title: Screen Flip
description: This article will walk you through the process of adding our brand new Screen Flip component to your ads! This component can be added to any of our Rich Media ad formats.
---

[Skip to content](https://help.adventive.com/en/knowledge/screen-flip#main-content)

[![Logo - Dark (1)](https://help.adventive.com/hubfs/Logo%20-%20Dark%20(1).svg)](https://adventive.com)

Open main navigation

Close main navigation

 Hello. How can we help?

- There are no suggestions because the search field is empty.

1. [Knowledge Base](https://help.adventive.com/en/knowledge)
2. [Building Ads](https://help.adventive.com/en/knowledge/building-ads)
3. [Rich Media Components](https://help.adventive.com/en/knowledge/building-ads#rich-media-components)

# Screen Flip

## This article will walk you through the process of adding the Screen Flip component to your ads! This component can be added to any of our Rich Media ad formats.

<iframe data-hsv-src="https://play.hubspotvideo.com/v/2658568/id/169565472346" referrerpolicy="origin" sandbox="allow-forms allow-scripts allow-same-origin allow-popups" allow="autoplay; fullscreen;" style="position: absolute !important; width: 100% !important; height: 100% !important; left: 0; top: 0; border: 0 none; pointer-events: initial" title="HubSpot Video" loading="lazy" data-hsv-id="169565472346" data-hsv-style="" data-hsv-width="688" data-hsv-height="172" data-hsv-autoplay="false" data-hsv-loop="false" data-hsv-muted="false" data-hsv-hidden-controls="false" data-hsv-full-width="false"></iframe>

 

**In this article, you will learn:**

[How to Add the Screen Flip Component](https://help.adventive.com/en/knowledge/screen-flip#add-screen-flip)

[How to Configure the Screen Flip Component Settings](https://help.adventive.com/en/knowledge/screen-flip#configure-screen-flip-settings)

[Additional Notes and Tips for Customizing the Screen Flip Component](https://help.adventive.com/en/knowledge/screen-flip#additional-notes)

### How to Add the Screen Flip Component

Below you will find a step-by-step process to configure the Screen Flip component:

1. Choose the ad format and dimensions of the ad unit you wish to add the Screen Flip component to. For guidance on building specific formats, check out [this article.](https://help.adventive.com/en/knowledge/building-ads#ad-formats)
2. From the left menu, select the components icon ![component](https://help.adventive.com/hubfs/Icons/component.svg),  **Screen Flip:**
   
   **![KB-Component-Screen-Flip](https://help.adventive.com/hs-fs/hubfs/2024%20KB%20Updates/KB-Component-Screen-Flip.png?width=375&height=859&name=KB-Component-Screen-Flip.png)**
3. Once the Screen Flip component is added to the canvas, you can resize the component as desired, and begin configuration using the right hand component configuration menu:
   
   ![KB-Component-Screen-Flip-Settings](https://help.adventive.com/hs-fs/hubfs/2024%20KB%20Updates/KB-Component-Screen-Flip-Settings.png?width=375&height=642&name=KB-Component-Screen-Flip-Settings.png)
   
   ***\* Note -** In order to select the screens to be used in the component ("First Screen" and "Second Screen" options), you'll need to ensure that you have added at least **two additional screens** within the[Screens & Layers](https://help.adventive.com/en/knowledge/screens-layers)panel for each Screen Flip component added to your canvas. Each of these screens can contain the assets/content that you would like to display within the Screen Flip component.*
   
   *If no additional screens are added, the "First Screen" and "Second Screen" dropdown menus will be empty.*
   
   ***The dimensions of each Screen Flip screen should match the dimensions of the Screen Flip component.***

 

### How to Configure the Screen Flip Component Settings

The Screen Flip componentconfiguration options are explained below:

| First Screen | Select the screen that you would like to display on the first side of the Screen Flip component (the pre-flipped state). |
| --- | --- |
| Second Screen | Select the screen that you would like to display on the second side of the Screen Flip component (the flipped state). |
| Direction | The direction that the component will flip: **Horizontal** or **Vertical.** |
| Flip On | The action that initiates the screen flip: **Timer**, **Click**, or **Hover**.  - **Timer -** If timer is selected, a **Delay** setting will appear, allowing you to set the delay (in milliseconds) until the component flips automatically. This is set to 3000ms by default. - **Click -** The component will flip on user click. - **Hover -** The component will flip on user hover. |
| Speed | The speed at which the component will flip (in milliseconds). This is set to 1000ms by default. |
| Open Go To Screen Actions in this Component | If selected, you have the ability to navigate to a new screen *inside* of one of the Screen Flip component screens. - **For example -** You could add an additional screen featuring another rich media component, and add a[go to screen action](https://help.adventive.com/en/knowledge/action-go-to-screen) inside of one of the screen flip screens to navigate to the additional screen/component. |

### Additional Notes and Tips for Customizing the Screen Flip Component

- You can add multiple Screen Flip components into an ad. There is no limit to how many Screen Flips can be added to a single ad! You would just need to ensure that you have added **two additional screens for each Screen Flip component** included in your ad unit. Each Screen Flip component will need to have a screen to assign to the First Screen (pre-flipped state) and another screen to assign to the Second Screen (post-flipped state).
- Renaming screens is a helpful way to keep the screens in your ad unit organized. Please see our [Screens & Layers](https://help.adventive.com/en/knowledge/screens-layers) article for information on renaming the screens in your ad unit.

- [Account settings](https://help.adventive.com/en/knowledge/account-settings)
- [Payments and billing](https://help.adventive.com/en/knowledge/payments-and-billing)
- [Advertisers](https://help.adventive.com/en/knowledge/advertisers)
- [Building Ads](https://help.adventive.com/en/knowledge/building-ads#main-content)

    - [Builder Basics](https://help.adventive.com/en/knowledge/building-ads#builder-basics)
    - [Ad Formats](https://help.adventive.com/en/knowledge/building-ads#ad-formats)
    - [Rich Media Components](https://help.adventive.com/en/knowledge/building-ads#rich-media-components)
    - [User initiated actions](https://help.adventive.com/en/knowledge/building-ads#user-initiated-actions)
    - [Tools](https://help.adventive.com/en/knowledge/building-ads#tools)
    - [Embedded Players](https://help.adventive.com/en/knowledge/building-ads#embedded-players)
    - [Best Practices](https://help.adventive.com/en/knowledge/building-ads#best-practices)
    - [Adventive Services](https://help.adventive.com/en/knowledge/building-ads#adventive-services)
- [Campaigns & Trafficking](https://help.adventive.com/en/knowledge/campaigns-trafficking#main-content)

    - [Third Party Tracking](https://help.adventive.com/en/knowledge/campaigns-trafficking#third-party-tracking)
    - [Ad Tags](https://help.adventive.com/en/knowledge/campaigns-trafficking#ad-tags)
    - [Delivery Groups](https://help.adventive.com/en/knowledge/campaigns-trafficking#delivery-groups)
- [Reporting](https://help.adventive.com/en/knowledge/reporting#main-content)

    - [Reports](https://help.adventive.com/en/knowledge/reporting#reports)

[![Logo - Dark (1)](https://help.adventive.com/hubfs/Logo%20-%20Dark%20(1).svg "Logo - Dark (1)")](https://adventive.com)

<https://www.facebook.com/adventiveinc/> <https://www.instagram.com/adventiveinc> <https://linkedin.com/company/adventive-inc>

Copyright © 2026, Adventive Tech Inc

```json
{
  "@context" : "https://schema.org",
  "@type" : "VideoObject",
  "contentUrl" : "https://2658568.fs1.hubspotusercontent-na1.net/hubfs/2658568/Screen-Flip-2.mp4",
  "dateModified" : "2024-06-05T15:30:37.393Z",
  "duration" : "PT10S",
  "height" : 445,
  "name" : "Screen-Flip-2",
  "thumbnailUrl" : "https://info.adventive.com/hubfs/Screen-Flip-2.mp4/medium.jpg",
  "uploadDate" : "2024-06-05T15:30:37.388Z",
  "width" : 1778
}
```