Bring objects together with the Group to create the same interactivity, create an animation or manage responsive design.

Instead of having a multitude of independent objects (images, text area...), create groups and structure your objects in terms of interactivity, animation and responsiveness.

A Group is a container that includes one or more objects. "Child" objects are inside the group (there is a notion of depth) and their behavior also depends on its Dynamic Size & Position parameters.

Add a Group

Add a Group from the Components window.

Double-click on the area and add one or more objects within the group.

Or select your objects and tap Cmd + G on Mac (or Control + G on Windows) to automatically group these items.

Ungroup a Group

You can ungroup a Group by typing Shift + Cmd + G on Mac or Shift + Control + G on Windows.

Resize a Group

By default, the group does not resize its content. If you resize the Group, you need to manually resize the items inside.

You can activate the option to automatically resize content, this icon is located in the toolbar next to the Dynamic Size & Position settings. Resizing is based on the Dynamic Size & Position of the objects inside the Group.

Animate & Crop the content of a Group

One of the advantages of the Group is to hide (crop) its content. This allows you to create appearance effects using a multi-state component.

To hide a group, insert the content, exit the group and use the handles to reduce the size of the group.

To make a drop-down menu, create a first state with the group size at 0 and in the second state resize the group. Change state when you click on the button.

Create the drop down using a multi-state component

Preview of the result

Still need help? Contact Us Contact Us