Bug or Intentional 2 breakpoints + 2 layout window resize

1

If I have two scenes and two layouts/breakpoints why doesn’t the animation restart from scene one. If I reduce the window sizes to change layouts, It starts from the last scene in my case two vs one?

Scene one is an intro and scene two is detailed Info I want the animation to restart from scene one/intro. Is there a js workaround?

2

you could listen to window.onresize, check for the current sceneName and show scene one if scene two is the current … may flicker a bit … request is quite unusual :slight_smile:

3

True, In my case when Im telling a story, Im isolating the intro from main (depending on how complex the animations are within the two scenes). The part where hype shines it allows for taking the complexity out and makes it easier to work with different scenes. That said, how would I set it up, can you please be a bit more specific?

Thanks

4

It is intentional that hitting a layout breakpoint for a scene only changes the layout, and not the scene. (Of course, a layout is just a scene under-the-hood).

If you want to restart an animation, the common way is of course to just put the animation on the layout itself instead of separating by scenes.

Alternatively to @h_classen’s suggestion, you could probably also listen to the HypeLayoutRequest event and change the scene based on code. (you’d probably need to return false from the callback method to indicate you handle it yourself.

The skeleton to handle events would be:

<script>

function layoutRequest(hypeDocument, element, event) {
	// detect here which layout to choose
	// if you need to return to the first scene, then return false since you handled it
}
if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>

Most folks want the reverse of this situation: not re-running animations on layout changing and keeping the state as much the same as possible. I would say this is a unique situation.

1 Like
5

My scenes are co-depended intro to main, think of it as two parts, I just choose to put intro on different scenes because it can get very complicated specially with how I end up doing things per timeline.

That said, how do I apply this on scene load?

Wait whats "prepare for display"? Is this the same as "on scene load"?

<script>

function layoutRequest(hypeDocument, element, event) {
	// detect here which layout to choose
	// if you need to return to the first scene, then return false since you handled it
}
if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>
6 
<script>

function layoutRequest(hypeDocument, element, event) {
	if (hypeDocument.lastLayoutName!=event.layoutName){
		hypeDocument.lastLayoutName=event.layoutName;
		hypeDocument.showSceneNamed(hypeDocument.sceneNames()[0]);
	}
}

if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>

restartIfLayoutNameChanges.hype.zip (48,1 KB)

PS: As seen in the example file… key is to keep the layout names the same from scene to scene. In that case you can even create more than two break points threads.

3 Likes
7

Thanks Max, much appreciated.