Flexible layout

On the front page you state: “Saola Animate supports flexible layout, that is, the size of the document adapts to the browser window size. Flexible layout allows your animations to run perfectly on any device and browser.”

How does this work?
How do I make the document adapt to the browser window size?

Hi Anders,

Size and position in Saola Animate can have pixel or percentage unit. Moreover, it supports four position modes: an element can have its position relative to top-left, top-right, bottom-left or bottom-right of its container. Those features will help you to create flexible layout documents.
Below are some basic guidelines which you can follow:

  • Set scene width and/or height to percentage (%) unit.
  • Set an element width and/or height to percentage (%) unit if you want the element to be resized automatically when the browser window resizes.
  • Use top-right or bottom-right position mode if you want to make the right edge of an element follows the right edge of its container (scene or group).
  • Use percentage unit for position if you want the gaps between elements or between an element and its container to be adjusted proportionally when the browser window resizes.

Regards