Scroll
Follow

Triggering an animation on page load with Tumult Hype

You may want to use this method when you want to trigger an animation to start when a reader turns to that page in your YUDU digital edition. Here is what you need to do:

Below is an example of your animation on the timeline, and you need to direct your attention to the ‘on Scene Load’ option at the bottom right of the screen.

 

image1.png

 

Here it is on closer inspection. First select “Run JavaScript” in the Action drop-down list and then select “New Function” from the Function drop-down list. You can title your function however you want, but here I have just left it as the default untitledFunction option.

 

image2.png

 

Clicking on the arrow to the right of the untitledFunction section will take you to a page where you can write and copy paste JavaScript. Then in-between the curly brackets that automatically present themselves, you need to paste the attached JavaScript:

var htmlOverlayVisible = (function () {

//stored state so that we can inform registering functions of the current state
var isVisible = false;
var ret = {};
var overlayVisibleFunctions = [];

ret.registerFunction = function (myFunction) {
overlayVisibleFunctions.push(myFunction);
//if the overlay is currently visible, inform it
if (isVisible) {
myFunction();
}
};

function whenOverlayVisible(m) {
var message = m.data.split(':')[0];
if (message == 'overlayVisible') {
isVisible = true;
for (var i = 0, l = overlayVisibleFunctions.length; i < l; i++) {
overlayVisibleFunctions[i]();
}
}
else if (message == 'overlayNotVisible') {
//update the state but don't call any functions as they only want to know when they become visible
isVisible = false;
}
}

window.addEventListener('message', whenOverlayVisible, false);
//inform the reader that we are ready to receive messages
window.parent.postMessage('overlayAttached', '*');
return ret;
}());

htmlOverlayVisible.registerFunction(function(){;

// THIS IS WHERE WE TRIGGER TIMELINE!
hypeDocument.startTimelineNamed("Main Timeline", hypeDocument.kDirectionForward);

});

Download the code file here.

Once you are done it should look like this:

image3.png

It is important to note that the above JavaScript will only trigger the Main Timeline from the beginning.

That’s it! You can now export your HTML using the File > Export as HTML5 > Folder option, and then zip/compress and upload it to YUDU publisher for inclusion in your Digital Edition, and your animation should trigger every time you turn to a new page.

Please let us know how you get on, and if you have any technical queries, don’t hesitate to contact us at [email protected].

 

Have more questions? Submit a request Print Friendly and PDF

Comments

Powered by Zendesk