How to maximize viewability using portals

Portals are used to increase viewability, lower platform cost and enhance user experience by decreasing resource usage on the visitor's device. This example shows three containers that can move their content between each other through the portal.

Setup

adk.config()
    .addContainer('my-container', adk.container.config()
        .provider('adk.hello')
        .formats([300, 300])
        .lazy()
        .fill()
        .reload()
        .portal('my-container'))
    .apply()
    .init(publisherId)

The provider will deliver colored boxes in a specific order: red, green, blue. The viewability condition for the content has been set to 100% of the pixels inside the viewport for 2 seconds. A dashed border indicates that the box has been viewable.

Scroll to first container, which will load the red box. Wait for it to be viewable, then scroll on to the second container, which will request new content from the provider - this time producing the green box.
Now try scrolling to the last container before the green box has been viewable. The result will be that the green box is moved from the second to the third container.
Wait for the green box to be viewable and then scroll back up to the second container, which will receive the blue box from the provider.

Result