App Designer - Animated Container

App Designer is drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various UI elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row. Amongst the available elements, there are a set of items that focus on animated bars.

Adding an Animated Sidebar/Crossbar

In the “Layout” panel, drag the Animated Sidebar/Crossbar to the layout

The bar will snap to the appropriate side of the layout

The containers contains the following properties:

Style (animation)

Duration

Sidebar Width

Initially Open

Swipeable (click and drag to open/close)

Fixed

ID

Triggered By (secondary item toggles the container)

Styling is also available for animated containers for the background, thumb, border, shadow and gutter. A button is present on the layout to toggle the container between an open and close state. This is good for previewing the animation and accessing the element. Other elements such as input fields and buttons can be added to the container to create menus or context points. For viewing the “Triggered By” property, the project will need to be viewed in a separate tab in the browser by clicking the “Preview” button.

Adding Animated Container Overhang feature

Click the checkbox for “Overhang width”

Input the appropriate size in the field to have the container appear on the layout