Stopping all HYPE timelines from the global Tumult Hype object

Using JavaScript with Hype
1

Hi

We recently started using HYPE in our organisation, and are very happy with it so far.
We have a new mobile app in development, that use react.js as the content renderer and here we’ve encountered a problem, when displaying HYPE content, or rather when we stop displaying it. Since it’s a single page app, that navigates by replacing content in the same DOM, embedded HYPE scripts generate errors when the content it’s connected to disappears. This is especially bad for infinitely looping animations.

The solution would seem to be to stop all HYPE content from the react app when navigating.
I have been searching the documentation, but can’t find a way to stop all content globally. If you know the exact names used in the HYPE project you can stop individual timelines or jump to an empty scene, but we are a large, and expanding organisation and it’s unsafe to assume everyone would adhere to a specific naming convention.

Have I missed something in the documentation? Is there already a global “stop everything” function? Or could someone suggest a solution?

Kind Regards
Thomas Rix
Danish Broadcasting Corporation

2

There’s no current way to do a global stop or an unload of the JavaScript. I’ve filed this as a potential feature to add in our API.

Note that even the empty scene workaround has a technical issue that persistent symbols would continue to run in the background.

My best suggestion for a workaround is to instead use an iframe in your react component for the Hype animations. As an iframe, when react tears it down then the animation would naturally stop because the linked page won’t exist. (I haven’t tested this though, but based on what I know of react this should work).

3

Hi @trix
Could you possibly say more about how your are using React.js to content renderer for HYPE? Do you have any examples that you could share?

Thank you!
Matt

4

Hi Matt

I was not involved in the final development and only did a few tests. But the essence of it, is that you can create a React Component that renders an iFrame, where you reference an html document with your Hype content. This way the Hype script is terminated when that document is no longer rendered.
Basic concept:

import React, {Component} from 'react';

class HypeFrame extends Component {
    render() {
        return (
            <iframe src="hypecontent.html" className="hype-frame"/>
        );
    }
}
export default HypeFrame;
1 Like