Responsive Layout Basics

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, thus calling the new element properties and animations.

Base Layout

Working on a responsive document, you’ll switch between two modes, base layout and 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 will be applied to all responsive layouts. Meanwhile, when you enter the responsive editing mode, you can override element properties and animations, thus creating different sets of styles which fit different 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 across 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 working in the base layout first and later making changes in the responsive layouts. Saola Animate highlights all overridden properties, animations, and related elements in the layout they appear as well as in the base layout. It also allows you to remove overrides to revert the element properties and animations back to the default in the base layout. Just click any orange highlighted property, animation, or element 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.