(Last Updated: June 14, 2018)

Responsive layout lets animations restyle to fit the device orientation and size changes. In this tutorial, you’ll learn the basics of responsive layout in Saola Animate.

This tutorial covers:

  1. Breakpoints and Layouts
  2. Base Layout
  3. The Viewport
  4. Properties and Animations with Responsive Layout

Breakpoints and Layouts

Responsive layout allows creating different layouts for a single document. Breakpoints mark the transition to a new layout with a different set of element properties and animations. You can create breakpoints for both horizontal and vertical viewport size changes.

When viewing in a browser, the HTML5 player will load the suitable layout based on the current device’s viewport size. As the viewport size changes, the player will alter the layout, calling the new element properties and animations.

Base Layout

Working on a responsive document, you’ll switch between two modes, including the base layout and the responsive editing mode.

The base layout is active by default so that you can work on it first. Element properties and animations in the base layout are applied to all responsive layouts. In the responsive editing mode, you can override element properties and animations. That way, you can create different sets of styles which fit the different layouts.

Animate in the base layout first and later make changes in the responsive layouts.

The Viewport

By default, a responsive document has scenes whose size starts at 100% of the container. The viewport width is also set to the device width to match the virtual viewport with the device dimensions.

When you’re creating responsive content, resizing the viewport helps in seeing how the output document will look with different screen sizes. You can preview your responsive content in browser or right within the program.

Properties and Animations with Responsive Layout

When it comes to element properties and animations, the best practice is work in the base layout first and later make changes in the responsive layouts. Saola Animate highlights any overridden properties, animations, and related elements in the layout they appear as well as in the base layout.

You can remove overrides to revert the element properties and animations back to the default in the base layout. Just click any organe highlighted properties, animations, or elements and select Remove Property/Animation Override.

That’s some basics of responsive layout in Saola Animate. Stay tuned as we’ll learn how to create a responsive layout in the coming tutorial.

Pin It on Pinterest