Do I need a placeholder image?

Using JavaScript with Hype Function Library
1

First I would just like to say that your documentation is great. I was able to get up and running very quickly. I’d like to apologize if I’m using the wrong terminology here, I’m still getting my head around it.

On a page I’m implementing, I have a series of exported projects that are displayed as “tiles”. Each project is very simple and contains a scene with a single animation (timeline?). I would like to loop through these projects and play the animations on repeat.

If I just include the markup supplied by the project, all the animations kick off at once when the page loads. Which is great, but not what I want.

What I did was use the HypeDocumentLoad event and setInterval() to iterate through the documents and play the animations (I know some of this is convoluted and could be clearer, but you probably get the general idea):

    if("HYPE_eventListeners" in window === false) {
        window.HYPE_eventListeners = Array();
    }

    window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":function () {
    
        var documentNames = Object.keys(HYPE.documents);
        var currentDocument = 0;

        window.setInterval(function () {
            HYPE.documents[documentNames[currentDocument]].showSceneNamed(HYPE.documents[documentNames[currentDocument]].currentSceneName());

            currentDocument++;
            if (currentDocument == documentNames.length) {
                currentDocument = 0;
            }
        }, 3000);
        
        return false;
    }});

Now this almost does what I want, but now on initial load each project only appears when showSceneNamed() gets called for it. I’d like all the projects to be visible when the page loads, but not animating yet, if that makes any sense.

I could solve this problem with a placeholder image, but I just wanted to know if there’s a better way.

Thanks.

2

Without seeing you project it is a little hard to figure out what you are doing.

But Possibly: Two ways to stop the auto playing.

Take the animations of the main timelines and place each on a new timeline. Main timelines will auto play. Others do not.

Or In each main timelines, right at the begining place a timeline action to pause the timeline.

Screen Shot 2015-06-11 at 22.37.26.JPG850×364 44.2 KB

Then you should be able use something like hypeDocument.isPlayingTimelineNamed(timelineName) to check if a particular time line is playing or not and start the next timeline with a hypeDocument.startTimelineNamed(timelineName, direction)

or continue the next timeline if it is paused with a hypeDocument.continueTimelineNamed(timelineName, direction)

Or you timer…

It should even be possible to put a timeline action at the end of each timeline to trigger the next. But I think you will need to use it to call a javascript function to start the next timeline.