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.

Group several objects together

💡 Tip: To group several objects together, select these objects and press Cmd + G on Mac (or Control + G on Windows) .

You can also add a group from the Components window.  

To edit the contents of a group, double-click on the area or click on the arrow in the Objects list. 

Ungroup objects

You can ungroup objects 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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.