Scene Overflow & Scale to viewport

I’m trying to achieve an effect that is not quite working which ever way I try.

The first problem is that an element that is outside of the scene only shows correctly when the scene is fully displayed. This is what it should look like:

This is what it looks like when pushed from scene to scene:

Then is it possible to use CSS to make the pink div to scale to the width of the viewport?

I have managed a similar effect (red footer) before - Interaktiv but it won’t work with pushed scenes.

Hi mackavi,

When pushing from scene to scene, Saola Animate sets the document overflow to hidden so that scenes will be clipped within the normal viewport. It’ll also cut off overflowed elements as shown in your screenshot.
You can use CSS as below to overcome this issue. However, it may cause unwanted effects in other cases.

/* document_container_id can be found in Document pane > Container ID field */
#document_container_id > div {
	overflow: visible !important;
}

Regards

Brilliant. That works a treat.

On the second part, is it possible make the div left align to viewport not left of the centre document? I know I can use JS to calculate the offset and apply this but I was wondering if there is a CSS trick?

I’m sorry but I’m not sure what you mean. Can you provide a screenshot?

In the image below, the document properties AutoFit and Alignment (centre) are set so that the scene (in green) scale to fit the viewport.

The position of the blue div is currently set as -58px in Saola and therefore appears outside of the scene.

What I’d like to know is there anyway to set the div so that it aligns to the left (white arrow) when I don’t know how big the gap (in black) is going to be.

Unfortunately, it’s not possible with CSS because the div position is relative to the scene.
You must use JS to calculate the offset and apply it.

Regards

Thanks Toan,

I’m not building anything specific, I was sent a broken SCORM project to fix and liked some of the styling and just want to see whether I could mimic aspects of it using Saola.