Starting with a different Scene

Is there a way to start a document at a selected scene. I have a large document that showcases everything, but I want to talk more in-depth about different scenes on different pages. If the document is Cached once it’s loaded, surely it’s better to load the same one and start at a different scene than create a whole new document, right?

Another question about Scenes and performance -
At the moment I have scene transitions from A > B with crossfade, but I’ve noticed that if I have the content of B also inside scene A, and I just make A 0% transparency and B 100%, the transition seems to be much more fluid.

What do you think will be the best method to keep performance levels up - Are scenes more costly or the content (with the hidden content being Display: Hidden)

My content itself is pretty simple, being mostly text, rectangles and simple SVG’s.

1 Like

Perhaps the information in this thread will provide useful:

1 Like

Scenes are pretty heavy weight, in that when they are loaded they have to reset a lot of DOM elements, setup timelines, load images (even if the image is cached, it may need to render and send to the graphics card), etc. Crossfading from one group to another on a scene will be more performant. But the tradeoff is definitely in organization and memory usage per scene.

As for loading at a different scene (I assume you mean via URL?) then this is what I was going to reference:

I was thinking more of a JS that is in my that just launches the document at a specific scene.

Is all the content of the scene loaded at the same time, or does it load as soon as it is called into view.

I’ve read here that the recommended upper bound is around 50 scenes. Do you have a similar number for the amount of elements in a scene (Very low and compressed image usage, mostly rectangles, text, and some very simple SVG’s)

Another question is what effect does (Visibility: Hidden) have on performance? Does it reduce the processing load if I use timelines to make them visible when they are required?

1 Like

What interaction would trigger this? I was guessing you wanted it to be a URL?

The DOM is constructed when the document is created. Properties/Attributes are assigned when the scene is loaded. There’s no Hype distinction for items coming into view, though undoubtedly browsers optimize rendering paths when items are hidden or offscreen.

The recommendation is more based on the fact that over 50 scenes is difficult to manage in Hype’s UI (since there’s no scene grouping, filtering, or multiple selection :upside_down_face:) and also that at some point there’s going to be a lot of overhead even if they are all empty scenes.

As for elements, at least you can group them or use symbols :slight_smile:. There’s no hard limit, but everything has a cost. I think it is more your call in what you’re comfortable with and how frequently you may need/want to reorganize. There’s other things to consider; generally re-render performance of SVGs is much poorer than raster formats, so it could be that N elements is terrible with SVGs but completely fine with other elements.

This is a browser implementation detail; the general answer is “yes” but is highly depending on your document and what you’re doing.

1 Like

Maybe a JS window.onload/document.onload or document.ready?

It’s mainly just a dashboard that shows information. There are pages (Avg around 10-15 rectangles, 15 text elements and max 5 small images).

I only have around 2/3 of these pages within one scene, but I’m thinking about cutting scenes down and increasing the number of these pages within a scene instead.

When they are not in ‘view’, they are at 0 Opacity and Hidden. Then when they are opened they become 100% and Display: Visible.

One more thing I’ve been wondering. Are linear transitions easier to process than say, ease in/out?

@jonathan Thank you very much for taking the time to answer my questions, I really like using Hype and I extremely appreciate the support you are providing.

1 Like

As a detail, Hype documents won’t be loaded at that point. See the example containing "HypeDocumentLoad" in our documentation to hook onto that event, and it also says how to change the scene at load time:

My guess is that if you are having performance problems doing a crossfade transition on scenes that are this simple then it might be due to SVGs… you may want to experiment quickly with replacing them with PNGs and just see if that’s the culprit.

Technically yes, but the performance hit is likely insignificant compared to the repainting/compositing that the browser has to do. It is just a bit more math (everything other than “instant” and “linear” is solved via quadratic bezier curves).

Happy to answer! :smile:


Thank You @jonathan this is interesting material…

Thank You @PappaSmalls for asking the questions.

Please bear with me as my JS knowledge is substandard.

Would it be possible to have the Scene name in the actual HTML page as a variable. Then once the document loads, a call from within the document checks for the external variable, and uses its value as the Scene name it should start at.

This way you can have a the variable on any page, even one that makes the document start at the first scene.

I hope I explained it well.

is it possible to load different scenes randomly at start?

Here’s a few threads on that:

Yes, the code would look like this:


var sceneNameToInitiallyLoad = "[[My First Real Scene Name]]";

function myHypeLoadCallback(hypeDocument, element, event) {
    return false;

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


Add this to the head of your HTML and change the string "[[My First Real Scene Name]]" to reflect the scene name you want loaded for that page.

This is adapted from the example in the documentation.