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:
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;
}
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?
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.
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.