Visibility Management lets you play a creative’s animation only when it’s visible.
To implement this solution, we must manage the visibility event in the banner and execute the animation when the event is captured.

Case where the banner is not visible:

First of all, you must modify your banner for the default display (image, div …), in case the banner is not visible.
In your html file, add a div corresponding to the size of your banner or a default image

example : 

<div id="loading" class="loading-image" style="background-image: url('no_visible.png');width:300px;height:250px;"></div>

For now we do not display the original banner with the animation

<div id="container" style="width:300px;height:250px;border:solid 1px black;position:absolute;display:none;background-image: url('visible.png');"></div>

Capture visibility:

the ADventori.isVisible () method lets you know if the banner is visible.

ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); this method subscribes to the visibility event and calls the parameter function when it is visible

example : 
//in the case below the function startAnimation will be called when the banner will be visible






function startAnimation() {

document.getElementById('loading').style.display = 'none';

document.getElementById('container').style.display = 'block';

//your code to trigger the animation of the banner


link example


Test the visibility of the banner:

Go to the ADventori test page : link

Upload your banner, to activate visibility click on the eye icon




resultat :