Scale down the whole scene

Saola Animate Support Questions
1

Problem:
Maybe not a Saola question, but worth asking.
Saola is great because I don’t have to do any coding. But problem is I want to get the result, but have not got the time to research the answer.
So having very easily done a nice Saola Project, with scene 800 wide, is there a way to scale the whole result down as needed, such as down to 200 wide as it appears in my web page? If I paste the Saola code into my web page its too wide sometimes, so can Bootstrap or HTML or CSS somehow be used to make the 800 wide animation scale down to fit into a 200px wide “container” or some such thing? Or an easy way to scale the whole project down in Saola and re export it?

Saola Animate version: 1.1.0

OS: Windows 10

Notes:

2

Hi,

To make the Saola document scale automatically to fit its container, please do the following steps:

  1. In the Functions pane, click New Function (the plus sign icon) > Normal Function to add a JS function as shown below. This function will scale the document to fit its container. If the Functions pane is hidden, please click View > Functions to show it.
function scaleFit(doc) {
  var docNode = doc.dom,
      containerNode = docNode.parentNode,
      scale;
  containerNode.style.overflow = 'hidden';
  scale = Math.min(containerNode.offsetWidth / docNode.offsetWidth,
                          containerNode.offsetHeight / docNode.offsetHeight); 
  // scale to fit container
  docNode.style.transform = 'scale(' + scale + ', ' + scale + ')';
  // center horizontally on container
  docNode.style.transformOrigin = '50% 0';
  docNode.style.top = 0;
  docNode.style.bottom = '';
  docNode.style.left = ((containerNode.offsetWidth - docNode.offsetWidth) / 2) + 'px';
  docNode.style.right = '';
}
  1. In the Document pane, click Event Handlers to open Document Event Handlers window.
  2. In Document Event Handlers window, add Run JavaScript action which call the function above to both Scene Activate and Window Resize event:
    scaleFit(doc);

Regards.

1 Like
3

Excellent! A working solution, and response almost instantly! Your support is really terrific, I’m trialing Saola Animate, and will certainly buy this product.