Triple midscroll

Three fullscreens stacked in one placement. As the reader scrolls, the ad unfolds scene by scene, with room for a full story: a set-up, a turn and an ending.

PlacementBetween the content
SizeThree screens tall
DevicesMobile, tablet, desktop
How to design a story across three screens of scroll →
Run the live demo Avatar: Fire and Ash, for Disney. Built in Madington Station.

Triple midscroll specs

Three scenes, each with a background, and overlays on top. The same assets and safe areas as the double midscroll; Station builds the scroll.

FormatTriple midscroll
DevicesMobile, tablet, laptop
DimensionsResponsive, three screens tall
File types.mp4 .mov .webp .webm .svg .jpg .png
Landscape asset1920×1080 · safe area 1400×940
Portrait asset1080×1920 · safe area 940×1670
Landscape1920×1080
Portrait1080×1920

Designing the assets

  1. The triple midscroll template consists of three "scenes", or if you want, three midscrolls one after another. So when you produce material for the triple midscroll you can use color, video or image as background for the scenes. Note you can not use two videos as the ad will get too heavy. On top of the backgrounds you can add three more assets in the form of png or svg files. One asset as an always visible item such as a logo or a CTA button and the other two as for example messages. All these assets need to be produced with the right canvas size and safe area in mind i.e. you need to place important information within the safe area.
  2. Background assets: Color can be added as a hex code in Station. Image or video as 1920x1080 (desktop) with safe area 1400x940 and 1080x1920 (mobile) with safe area 940x1670.
  3. Overlay assets: Svg or png files as 1920x1080 (desktop) with safe area 1400x940 and 1080x1920 (mobile) with safe area 940x1670.
  4. You have to produce for mobile or desktop views separately.

Triple midscroll FAQ

What is a triple midscroll ad?

Three midscrolls one after another in the same placement. The first scene fills the screen, and as the reader keeps scrolling the second and third scenes are revealed.

How is it different from a double midscroll?

It is the same format with one more scene: the same assets, sizes and safe areas, three screens tall instead of two.

Which assets do I need?

For each scene a colour, an image or a video as background (1920×1080 for desktop, 1080×1920 for mobile), with logo, messages and CTA as png or svg overlays inside the safe areas.