Grouping objects on your canvas is a great way to have multiple elements behave as if they are one object. This allows you to more easily move objects around the canvas, animate multiple objects as a group and easier target groups of objects with interactions. Below we will outline the steps to group objects together and some of the use cases for doing so.
Grouping objects
First, identify the objects you would like to behave as a group. You can select these objects on the canvas or in your layers panel. Once selected, group the objects using the keyboard shortcut cmd + G, selecting the Group button at the bottom of the layers panel, or right clicking on the selected objects and selecting Group.
Note: To ungroup objects, use the keyboard shortcut cmd + shift + G or right-click on an object and select Ungroup. Be aware, that using the keyboard shortcut cmd + G will create a group within a group.
Selecting individual objects within a group
It is really easy to select an individual object even when it already exists inside a group. To start, single-clicking on any grouped object will select the entire group. To drill down to the individual objects or groups contained within, simply double-click on the targeted object after selecting a group of objects. Alternatively, you can also manually select the individual objects in your layers panel.
Note: If you are trying to drill down into grouped objects that are layered on top of each other, we will still default to the top-most object for the selection. If this is the case, it may be easier to select the individual object within the layers panel.
Groups within groups
You also have the ability to group objects within another group of objects. This is helpful when there is a hierarchy of objects that need to be manipulated as one. Take the carousel below for example. We have grouped everything related to the carousel content together, but have also grouped each of the carousel slides together too. This makes it easier to cycle through the groups with an interaction while still being able to move them around on the canvas as a whole.
Animating Groups
With groups, you also unlock the ability to apply multiple animations to an object simultaneously. For example, in the piece below, we animated the individual asteroid object to “Spin clockwise” on repeat, and then created a group containing the asteroid and applied a “Slide out to the right” animation to the entire group.
Note: If you are looking to optimize your content for screen readers, please see this article on Creating Accessible Content in Ceros for more detailed best practices on using folders and groups.