So i'm working with rich media format templates on Weborama.
For a project I'm working on i'm making an interscroller, Example: Interscroller example
Basically, its a fixed position in a scroll position in the article. Many designers just use a simple static image, however the stenght of this format is the option to create animated and interactive content.
As the interscroller positions are often placed somewhere in the middle of a webpage its desired to start playing the timeline animations only when the advertisement is in view.
As shown in the example above, Weborama provides templates that allow to do this. As I looked at the code of the example, its possible to start the animation when its in the viewport
My question is, would I be able to start a timeline in hype in this hasVisibility method? As I copy the body content from my hype document into the body content of this template.
My idea is to have a timeline action on the main timeline set to pause the timeline on frame 1, then I would want to resume the main timeline once its visible in the hasVisibility method, and then after the } else {, I would want the timeline to restart (go back to frame 1).
Is this possible to do? and if so, how what that look like?
From looking at the hype API, i figure it needs to be something with this hypeDocument.continueTimelineNamed(timelineName, direction, canRestartTimeline)#
Hope someone could guide me in the right direction
Since you also only want to try to start the timeline after the Hype document has loaded, you'll need to make sure that a HypeDocumentLoad event has been detected. You can do that with this function:
function HypeHasLoaded(hypeDocument, element, event) {
HYPE.documents['HypeDocumentNameDuringExport'].continueTimelineNamed('Timeline X', hypeDocument.kDirectionForward, canRestartTimeline);
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeDocumentLoad",
"callback": HypeHasLoaded
});
thanks for the fast reply, I wasn't aware of the invoking API from Hype, thats exactly what I needed!
I'll give it a go, and post the template once I'm done
*Edit, quick question: I see that the main time in Hype is called "Main Timeline", and this cant be changed or renamed. How would I call upon that timeline in JS, is it "Main_Timeline" or "MainTimeline" or "Main Timeline"?
* it will in fact accept localized versions, like "主时间线" or "control temporal principal", and also robustly accepts any capitalization, but these are not preferred forms
Allowing to use the examples as included when double-clicked in the API inspector.
Sidenote: Personally, I am not a fan of localized names like that … it leads to many problems. In Hype this is limited to the main timeline, but it is/was awful in Adobe After Effects as they even use localized API names. That often leads to weird errors when opening a file in another language that contain JSX commands. I think they fixed some of it with lookups (like the Hype runtime), but it certainly doesn't help with a consistent learning experience for people that work international or exchange scripts, files and tips & tricks globally.
Agreed; it was really a bug that they were originally accepted. Since this bug worked its way into API, we have to pretty much maintain it forever . But like I said, these are definitely not the preferred forms - "Main Timeline" should be used for code consistency.
I've tried implementing the snipped you've posted above, but for some reason I can't get it to work.
What I've setup now I made a new timeline I want to play when the ad is in visible, I've tried this in the screenad visibility function
// handleVisibilityChange is called when the ad changes visibility.
// it can be used to start an animation or video if the ad has its visibility.
// check it with `screenad.hasVisibility` (will return true or false).
function handleVisibilityChange() {
if (screenad.hasVisibility) {
// start content (animation, video, show content)
HYPE.documents['TestDocument'].startTimelineNamed('ScrollTimeline', hypeDocument.kDirectionForward);
} else {
// stop content (animation, video, hide content)
}
}
Below in the place where I could add my own function I've placed this
function HypeHasLoaded(hypeDocument, element, event) {
HYPE.documents['TestDocument'].startTimelineNamed('ScrollTimeline', hypeDocument.kDirectionForward);
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeDocumentLoad",
"callback": HypeHasLoaded
});
But it doesn't seem to want to work as can be seen here in the example (Scroll down in the page): https://previewer.weborama.nl/preview/yP0z
It stays at the orange screen, and doesn't play the yellow timeline that I animated in at the ScrollTimeline timeline.
It is a little hard to test with your setup since there's the iframe and ad interactions, but I see there's an issue in the kickoff line:
Specifically in external code the hypeDocument in hypeDocument.kDirectionForward isn't going to be defined, since that is usually just an argument passed into internal Hype functions. It is globally referred to as the HYPE.documents['TestDocument']. So the code should actually be:
Beyond this, it seems like you might also have flexible layout issues - I can see the timeline run if I modify the .html file to work correctly, but the yellow background doesn't quite show up the way it seems you intend.
I'd first try getting the interactions all set while previewing; you can use the developer console to try running the HYPE API there and make sure it works as expected. Just note that the document name is always 'index' - as in HYPE.documents['index'].startTimelineNamed('ScrollTimeline'); in the preview environment.
I got it working with the refined kickoff line you posted. The issue of the yellow timeline was a fault in the hype projects (responsive settings i figure), not with the HTML page. Here I got it working https://previewer.weborama.nl/preview/QWQM
. But like I said, these are definitely not the preferred forms - "Main Timeline" should be used for code consistency.