Topscroll Expand is a responsive high impact format that appears in three distinct states. By default, the format appears as a 30% height Topscroll. On interaction (eg mouse hover), the format expands to take up 70% of the screen height. When the user scrolls down the page, the whole format collapses down to a 10% height sticky banner at the top of the screen. This template allows for the easy creation of a Topscroll Expand creative, using a few simple assets.
Examples
Recommended asset dimensions
Dimensions for each state are as follows (based on a 1080x1920 starting resolution):
- Default: 1080x576px (30% height)
- Expand: 1080x1344px (70% height)
- Sticky: 1080x192px (10% height)
Background(s):
- The template supports either using one background asset (JPG, WEBP or MP4) across all three states, or using individual background assets for each state.
- If using a single asset for all states, create a background asset using the dimensions for the largest state (Expand).
- If using individual background assets, create one for each state using the three dimensions above.
- The background asset may appear cropped dependant on screen size or resolution, so avoid placing any critical content on it - instead use the overlays to contain your branding and messaging.
Overlays:
- Each state uses a separate overlay asset (PNG or WEBP with a transparent background), which are swapped when the banner transitions from one state into another. As with many of our templates, the specific dimensions of the overlay assets are flexible, here are some suggested overlay dimensions for each state:
- Default:490x460px
- Expand: 820x440px
- Sticky: 550x110px
Video Player:
- A single 16:9 video asset is used across all three states.
Use dimensions of 888x500 (or similar), MP4, <2MB.
Format description and guidance
The background asset (image or video) fills the entire format background. If separate background assets are not required for any of the states, then just leave them blank and the default state background will be used instead.
For each state, upload an overlay asset containing your brand elements. The overlays should be used for the logo, headline, CTA, and any other brand elements that you need to always be visible. The content of the overlay will be centred within the available space, with a 10% margin added around all sides.
The video is a required element. It is autoplaying, and muted by default. The video will continue playing as the banner transitions to different states, ensuring excellent video playthrough rates.
Mobile Topscroll Expand (Image/Video)
We recommend exporting your image assets at x2 for better quality resolution.
Max total file weight
3.5 MB
For best performance, all assets should be compressed and optimized to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.
Click tags and tracking
The format template supports one clicktag & impression tracker.
Audio
User initiated.
Template Details
Automatically synced on 2026-02-11T14:27:19.533Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.
Canvases: Mobile Topscroll Expand
Banner templates: Topscroll Expand Image Only Template, Topscroll Expand Streaming Video Template
Use the tables below to configure the linked banner templates. Each parameter definition is pulled straight from the template config, ensuring the spec always documents the latest functionality.
Topscroll Expand Image Only Template
Template for Topscroll Expand · Version 1.0.3
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | Required |
Default State
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Default Background Colour | This is the background colour of the default state. It applies if no background image is set. | #ffffff | |
| Default Background Image | This is the background image of the default state. If set, it will override the background colour. If other backgrounds are not set, this will be used. | ||
| Default Overlay Image | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | ||
| Default Overlay Width | This is the width of the content overlay in the default state. | 80% | choices: 60%, 70%, 80%, 90% | |
| Default Overlay X Alignment | This is the horizontal alignment of the overlay in the default state. | center | choices: left, center, right | |
| Default Overlay Y Alignment | This is the vertical alignment of the overlay in the default state. | center | choices: top, center, bottom |
Expand State
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Expand Background Colour | This is the background colour of the expanded state. It applies if no background image is set. | #ffffff | |
| Expand Background Image | This is the background image of the expanded state. If set, it will override the background colour. | ||
| Expand Overlay Image | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | ||
| Expand Overlay Width | This is the width of the content overlay in the expanded state. | 80% | choices: 60%, 70%, 80%, 90% | |
| Expand Overlay X Alignment | This is the horizontal alignment of the overlay in the expanded state. | center | choices: left, center, right | |
| Expand Overlay Y Alignment | This is the vertical alignment of the overlay in the expanded state. | center | choices: top, center, bottom |
Sticky State
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Sticky Background Colour | This is the background colour of the sticky state. It applies if no background image is set. | #ffffff | |
| Sticky Background Image | This is the background image of the sticky state. If set, it will override the background colour. | ||
| Sticky Overlay Image | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | ||
| Sticky Overlay Width | This is the width of the content overlay in the sticky state. | 80% | choices: 60%, 70%, 80%, 90% | |
| Sticky Overlay X Alignment | This is the horizontal alignment of the overlay in the sticky state. | center | choices: left, center, right | |
| Sticky Overlay Y Alignment | This is the vertical alignment of the overlay in the sticky state. | center | choices: top, center, bottom |
Topscroll Expand Streaming Video Template
Template for Topscroll Expand featuring overlays and a video player. · Version 1.1.2
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | Required | |
| Video | Provide the video video in MP4 or WEBM format, encoded for autoplay and kept under the maximum weight. | Required |
Default State
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Default Background Image | The default state size is typically 30% of the total screen height. If backgrounds for other states are not set, this will be used. | Required | |
| Default Overlay | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | Required |
Expand State
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Expand Background Image (optional) | The expand state size is typically 70% of the total screen height. | ||
| Expand Overlay | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | Required |
Sticky State
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Sticky Background Image (optional) | The sticky state size is typically 10% of the total screen height. | ||
| Sticky Overlay | Upload the overlay asset (JPG, PNG, or WEBP). Overlays render with object-fit: contain, so they will not crop and do not require extra safe-zone padding. | Required |
Video Config
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Max Stream Weight | Sets the maximum file weight of the video. | 2.5mb | choices: 3.5mb, 2.5mb, 1.5mb, 1.0mb | |
| Video Audio | Select the video audio option from the list to control how the template behaves. | Disabled | choices: Enabled, Disabled | |
| Show Video When Sticky | Hide the streaming video while the sticky state is active. | Enabled | choices: Enabled, Disabled |