Tips - Start an HTML Animation on View

A Mag+ app has at least three Verticals loaded at any given time (see illustration below).

The app has three boundaries in which it loads content:

1. The "Outside" boundary is not visible at all to the user. The app loads as much content possible outside this boundary. If the device runs low on memory, the app will stop loading Verticals outside of this boundary.
2. The "Safe Zone" boundary is approximately halfway down from the visible area of the screen. All content inside this boundary will begin loading so that images, HTML, media, and more is ready before the user scrolls it onto the screen.
3. The "Inside" boundary is what is visible to the user.

We can alter when an HTML animation is started. You can enter a callback in your javascript code in order to set when the animation should play.

• onViewEnteredSafeZone()
  Using this callback will run the function when it is loaded within the Safe Zone boundary of the Mag+ app.
• onViewEnteredInside()
  Using this callback will run the function when it is loaded within the Inside boundary of the Mag+ app.

Below is an example javascript for an HTML animation made with Hype. The text in bold tells the script to only run when the HTML object is within the "Inside" boundary. Don't forget to add a close bracket "}" at the very end of the document to close the function.

//HYPE.documents["version1"]

var init = false;
function onViewEnteredInside(){
    if(init) return;
    init = true;

//<your Hype code here>

}