See objects beyond scene boundaries on export?

Exporting & Previewing
1

Hi,

Is it possible to have all objects show beyond the scene edge when exported? I’ve tried setting Overflow:visible in the html export but no joy. Just need for a one off animation.

Cheers,

Finn

2

The easiest solution may be to turn on flexible layout but not have any elements be flexible. You can do this by checking the scale 100% boxes in the Scene Size inspector for width and height. The downside is the document won’t be centered with this technique.

The other method is that you can set overflow:visible !important on the .HYPE_scene class along with the ID of your main container. It’d look like:


	<style>
	
	#index_hype_container {
		overflow: visible !important;
	}
	
	.HYPE_scene {
		overflow: visible !important;
	}
	
	</style>

(where #index_hype_container would need to potentially be replaced with your container div name; do note that previews always use that name, so you may want a duplicate rule for your export one).

This isn’t strictly supported because we may change class names in the future - it is relying on Hype internals.

3

Great, thanks Jonathan I’ll give it a go.

Also, in a separate project I am using viewpoints for a long scrolling animated infographic.

The document length is about 4000px, but I only want about 540px visible at one time. Could you tell me how best to do this?

I tried setting the height to 540px in the .html file, and using

<style>
	
	#index_hype_container {
		overflow: scroll !important;
	}
	
	.HYPE_scene {
		overflow: scroll !important;
	}
	
	</style>

However the whole 4000px shows. (guess it’s overwritten by the js file)

Cheers

4

I’d either make a dive outside of the index_hype_container div with overflow scrolling and a set height, or just make a group within your scenes in the Hype document and have that set to use overflow scrolling.

5

Hi @jonathan ,

Given both of the suggestions a go, unfortunately neither really work.

See the attached document. The ‘On Enter Viewport’ actions either fires early, or fails to fire. It still appears to be using the browsers viewport, and where the object would be if it were not hidden.

rectangle_viewport_test.hype.zip (11.0 KB)

Any ideas?

Cheers

6

Unfortunately viewport actions are not properly triggered within groups that are set to use scrolling for overflow. If you need to trigger items in this manner, you would need to use an iframe that contains the Hype document with these viewport actions.

7

iFrame worked a treat, thanks for the help Jonathan.

8

Hi Jonathan,

The iframe is working well in all browsers except safari on IOS. It appears IOS does not obey the forced height of an iframe. Bit of a long shot, do you have any other suggestions/fixes?

Thanks for the help,

Finn

9

It isn’t clear why there would be differences or what exactly you mean by forced height; can you send a zip of your most recent page?