How to maximize viewability using teleport

Teleport is an advanced method of increasing viewability. It can decrease resource usage on the visiting device and lower platform cost. This example shows three containers that can teleport (reuse, move) content between each other.

Setup

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

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 teleported 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