Action on Scroll

Actions are single-event operations to trigger something specific to happen within your ad build. 

Any asset, text box, shape or hitbox can have a corresponding action set to it. Just select the object you’d like to set an action to, and the "Actions" section will appear in the Properties panel on the right.

Action on Scroll- You can now go to a different screen using the 'scroll' action. 

Go to Screen on Scroll action selection overview: 

  • Scroll – greater than or less than a certain number of pixels
  • Distance – The set pixel amount you want the ad to close at (greater than or less than Xpx)
  • Screen – default is set at 300ms – speed of the transition animation
  • Transition – The animation effect - Slide, Fade or Push
    • Slide – Screen slides left, right, up or down
    • Fade – Screen crossfades to the next
    • Push – Screen pushes page content down or up
  • Transition Time – default is set at 300ms – speed of the transition animation
  • Direction– Up, Down, Left, Right, X-Auto (auto detect)
  • Report Label - (optional) append a unique label for the Go To Screen action - will display in campaigns and reporting

NOTE: this action is recommended for containers that will be in view when the page loads. We recommend testing on an actual page to determine the correct size. 

First, select the asset you’d like to set the action to, click the arrow next to "Actions," and click "Add Action":

 

Select "Go To Screen" from the 'Action' menu, then select "On Scroll" from the 'Action On' drop down menu:

 

After you've chosen the initial action, select whether you want the scroll distance to Greater than or Less than a certain pixel distance from the drop down menu:

 

Input your Distance (note that this field may need to be modified during testing):

 

Choose the screen you want the action to go to. Be sure you have added screens before you get to this step, or they will not be available in the drop down menu: 

 

Make your selection for type of Transition (Slide, Fade or Push):

 

Click in the Transition Time field if you'd like to change the default setting of 300ms (speed of the transition animation). 

Next, choose the direction of your Transition (Up, Down, Left, Right, or X-Auto)

Finally, add a Report Label (optional) - append a unique label for the action . This will display in campaigns and reporting:

 

Great job! Your action has now been added to your element.  

Example

Collapsible banner using "Go to Screen on Scroll" action.

NOTE: This action can be added to any format- (we will be creating a banner for this example.) 

First, create a new file. You will need to create an ad unit with two screens. Choose your dimensions for the first screen based on the size of your ad in its collapsed state. Click "Submit."

 

Add a second screen. For this example, it will be the same width as our first screen, but does not necessarily need to be depending on your ad. 

 

On your first screen, after you add your assets, add a hitbox to the side/off of your main workspace. 

 

Add an action to the hitbox with the following settings (the distance may need to be adjusted): 

 

While you're still on the first screen, create a second hitbox off your workspace with the following settings:

 

Go to your second screen, add your assets, and create another hitbox. 

 

 Add an action to this hitbox with the following settings: 

 

Your ad should now expand and collapse as the user scrolls up and down the page. 

 

Need more help? Contact us at support@adventive.com