Responsive layouts cause javascript to run again

Using JavaScript with Hype
#1

Hello everyone,

I am building a site in hype that has responsive layouts, all of the animation is done using Greensock TweenMax.

The problem is when I scale the browser and hit a breakpoint the javascript runs again, which causes all kinds of problems including the animation restarts.

Is there any way for me to get hype to load a script when the document loads, but not when the layout switches between breakpoints? I tried putting the javascript in the head ,but the same thing happens.

Thanks in advance.

-Boone

#2

Hype does animation too!

If you were using the timelines within Hype, you could run this function on Layout Load + Unload: Howto: Synchronize timelines across layouts

But perhaps for your case you want to look at whether the layout has been loaded and then run whatever initialization scripts you need only if the layout has not yet been loaded (or an array of layouts have not been seen). What types of things are happening on Layout Load in your document? Can you share an example Hype file or URL?

#3

Thanks for the reply, I figured out a workaround. This eliminates the javascript re-running.

I have a function in hype that is called from the external html, using some stuff you posted in another thread.

It looks like this:

<script>
    function myCallback(hypeDocument, element, event) {
        // this calls my hype function
        HYPE.documents['responsive1'].functions().mainControl();
        return true;
    }
    // this section waits for hype to finish loading

    if("HYPE_eventListeners" in window === false) {
        window.HYPE_eventListeners = Array();
    }
    
    window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

</script>

Thank you for the quick response.

p.s. I love the hype animation tools, it’s just that this specific project requires some TweenMax animation.

2 Likes