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.
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